我目前正在制作基本的拖放系统,需要检索要移动的元素的top
和left
属性。如果我这样做:
var mover = document.getElementById('mover');
alert(mover.style.top);
不会提醒任何事情('')
有没有办法检索CSS值(在JS中)而不必先用JS定义它们?
答案 0 :(得分:2)
如果您希望检索计算而非定义的属性,则需要使用getComputedStyle。
https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
从MDN链接...
<script>
function getTheStyle(){
var elem = document.getElementById("elem-container");
var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
document.getElementById("output").innerHTML = theCSSprop;
}
getTheStyle();
</script>
答案 1 :(得分:0)
您可以将元素的位置设为position().top
,css值可以检索为.css("margin-top")
或.css("top")
alert($('#mover').position().top);
alert($('#mover').css("margin-top"));
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='mover'>dasdasD</div>
&#13;
因为你不喜欢jQuery,所以这里是纯JS的解决方案
更新:
var mover = document.getElementById('mover');
alert(window.getComputedStyle(mover).getPropertyValue('margin-top'));
&#13;
<div id='mover'>dasdasD</div>
&#13;
答案 2 :(得分:0)
有三种可能的top
需要担心:
实际的最高位置。每个元素都有一个由页面布局产生的顶部,无论它是否具有top
属性的计算值。通过getBoundingClientRect
。
CSS属性top
的计算值。使用getComputedStyle
获取此内容,如其他答案中所述
top
元素上设置的当前样式值。在尝试时使用elt.style.top
获取此内容。
答案 3 :(得分:-2)
<body>
<div ng-app="myApp" ng-controller="customersController">
<ul>
<li ng-repeat="x in names">
{{ x.id + ', ' + x.name}}
</li>
</ul>
</div>
</body>
<Script>
var app = angular.module('myApp', []);
app.controller('customersController', ['$scope',
function($scope,$hhtp) {
$scope.names = [
{"id":"1", "name":"Doe"},
{"id":"2", "name":"Smith"},
{"id":"3", "name":"Jones"}
]; }]);
</Script>