javascript - 获取 UL 的宽度

Question

这是我无法获得 <ul> 宽度的问题.

html文件:

<ul>
    <li>image goes here</li>
    <li>image goes here</li>
    <li>image goes here</li>
</ul>

CSS文件:

ul {
    display: inline-block;
    white-space: nowrap;
}

 li {
    width: 90px;
    height: 90px;
    display: inline-block;
}

这里是 Jquery 代码的例子:

$(document).ready(function(){
    var $width = $('ul').width();
    console.log('width: ' + $width); 
});

它返回 0 如何获得 ul 宽度？

Answer 1

使用 CSS 函数 css 和 wdith 作为属性:

$('ul').css("width");

$(document).ready(function() {
  var $width = $('ul').css("width");
  console.log('width: ' + $width);
});

ul {
  display: inline-block;
  white-space: nowrap;
}

li {
  width: 90px;
  height: 90px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>image goes here</li>
  <li>image goes here</li>
  <li>image goes here</li>
</ul>