javascript - jqLite：elm.css（“width”）返回一个空字符串 - Thinbug

jqLite：elm.css（“width”）返回一个空字符串

时间：2013-05-17 19:07:38

标签： javascript jquery angularjs

这似乎是jqLite的问题，我在使用angular.js时遇到过这个问题。要查看问题，请打开控制台选项卡，然后单击this jsbin中的“与js一起运行”。 left.css("width")在不应该返回空字符串时返回。

HTML

<!doctype html>
<html ng-app>
  <head>
<meta name="description" content="Angular Template" />
    <script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="left"><span id="test">left</span></div>
      <div class="right">right</div>
    </div>
  </body>
</html>

CSS

.container {display:table; width:100%;}
.left {border: 1px dashed purple; display:table-cell; overflow:hidden; width: 66%; height: 20px;}
.right {display:table-cell; background:green;  width: 34%; height: 20px;}

JS

var innerSpan = document.getElementById("test");
var left = angular.element(innerSpan);
console.log(left.css("width"));

当我使用chrome dev工具面板检查元素时，计算出的宽度绝对不是空字符串？我在这里缺少什么？

1 个答案:

答案 0 :(得分：14)

您不能使用.css('width')来获取元素的宽度。您可以使用它来获取样式宽度。由于没有在元素的样式属性中定义宽度，因此没有任何值。

请尝试.prop('offsetWidth')。

此外，使用jsbin.com时，会自动包含您的脚本。包括script.js只是扔了404。