Question

我在网站上动态设置ul元素的宽度时遇到问题。

以下是我正在使用的jQuery

var button = $("#navbar");
alert(button);
var count = $("#header li").length;
alert(count);
$("#navbar").style.Width = count * 110

这是HTML

<div id="header" class="clearfix">
    <div class="clearfix hidden">
        <img src="/Content/Images/main-logo.png">
    </div>
    <div id="navbar">
        <ul>
            <li id="home">
                home
            </li>
            <li id="portfolio">
                portfolio
            </li>
            <li id="about">
                about
            </li>
        </ul>
    </div>
</div>

“alert（button）”返回[object Object]所以它不为null（至少我对它的理解）但是每当我尝试设置它的宽度时，我都会得到标题中提到的错误。

任何人都知道我做错了什么？

Answer 1

您必须使用以下代码之一

$("#navbar")[0].style.width = count * 110

或

$("#navbar").width(count * 110)

因为style是DOM元素的属性，而$("#navbar")是jquery对象，默认情况下不包含style属性。

Answer 2

style是一个DOM属性，但不是jQuery对象的属性。如果你想使用jQuery设置宽度，你可以直接使用css getter/setter或width function。

$("#navbar").width(count * 110);
$("#navbar").css('width', (count * 110) + "px");

Answer 3

您正在使用$("#navbar")处理jQuery元素。如果你想使用vanilla javascript设置宽度：

$("#navbar")[0].style.width = count * 110  //note that the width property is not capitalized

或者使用jQuery的width方法：

$("#navbar").width(count * 110);

未捕获的TypeError：无法设置未定义的属性“宽度”

3 个答案: