JavaScript检索元素的CSS值

时间:2015-04-23 07:48:24

标签: javascript css

我目前正在制作基本的拖放系统,需要检索要移动的元素的topleft属性。如果我这样做:

var mover = document.getElementById('mover');
alert(mover.style.top);

不会提醒任何事情('')

有没有办法检索CSS值(在JS中)而不必先用JS定义它们?

4 个答案:

答案 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")

&#13;
&#13;
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;
&#13;
&#13;

  

因为你不喜欢jQuery,所以这里是纯JS的解决方案

更新:

&#13;
&#13;
var mover = document.getElementById('mover');
alert(window.getComputedStyle(mover).getPropertyValue('margin-top'));
&#13;
  <div id='mover'>dasdasD</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

有三种可能的top需要担心:

  1. 实际的最高位置。每个元素都有一个由页面布局产生的顶部,无论它是否具有top属性的计算值。通过getBoundingClientRect

  2. 获取此信息
  3. CSS属性top的计算值。使用getComputedStyle获取此内容,如其他答案中所述

  4. 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>