javascript - jqLite: elm.css("width") is returning an empty string

This appears to be an issue with jqLite, which I came across while working with angular.js. To see the problem, open the console tab and click "run with js" in this jsbin. left.css("width") is returning an empty string when it shouldn't be.

HTML

<!doctype html>
<html ng-app>
  <head>
<meta name="description" content="Angular Template" />
    <script src=".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"));

When I inspect the element using the chrome dev tools panel, the puted width is definitely not the empty string? What am I missing here?

HTML

<!doctype html>
<html ng-app>
  <head>
<meta name="description" content="Angular Template" />
    <script src="http://code.angularjs/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"));

When I inspect the element using the chrome dev tools panel, the puted width is definitely not the empty string? What am I missing here?

Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked May 17, 2013 at 19:07 Jonah 16.2k23 gold badges93 silver badges169 bronze badges

Did you try just innerSpan.style.width ? – adeneo Commented May 17, 2013 at 19:11
Well, I specifically want to know why this isn't working, but in any case that idea doesn't work either. You get Cannot read property 'width' of undefined – Jonah Commented May 17, 2013 at 19:15
1 Oh, you placed the javascript code before the elements, so when getting document.getElementById("test") that element does'nt exist yet, that's why jQuery has document ready. – adeneo Commented May 17, 2013 at 19:18
you need to add jQuery – Abraham Uribe Commented May 17, 2013 at 19:23
why do you need to add jQuery? – Ven Commented May 17, 2013 at 19:31

| Show 5 more ments

1 Answer 1

Sorted by: Reset to default 14

You can't use .css('width') to get the width of an element. You use it to get the styled width. Since you didn't define the width in the element's style attribute, you get no value.

Try .prop('offsetWidth') instead.

Also, when using jsbin., your script is automatically included. Including script.js is just throwing a 404.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - jqLite: elm.css("width") is returning an empty string - Stack Overflow

HTML

CSS

JS

HTML

CSS

JS

1 Answer 1

与本文相关的文章

评论列表(0)