jquery - 未捕获的类型错误：无法设置未定义的属性“宽度”

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] 所以它不为空（至少我对它的理解），但每当我尝试设置它的宽度时，我都会收到标题中提到的错误。

有人知道我在做什么错吗？

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 函数。

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

Answer 3

您正在使用$("#navbar"). 如果你想使用 vanilla javascript 设置宽度：

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

或者使用jQuery的width方法：

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