获得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>