获得UL的宽度

时间:2017-09-24 07:32:39

标签: javascript jquery html css

以下问题是我无法获得<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宽度?

1 个答案:

答案 0 :(得分:0)

CSS 函数csswdith一起使用作为属性:

$('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>