Question

所以我试图实时改变特定元素的宽度。这意味着在缩放浏览器窗口时，元素会随之改变宽度。

现在，我计算这个宽度的方法是使用另一个元素作为参考点。所以我只是复制参考元素的宽度并将其应用于我自己的元素。但问题是，这仅在每次刷新页面后应用，而不是实时更改。

我使用以下jquery代码：

 $("#lists ul").css("width", $("#lists").width());

如您所见，代码非常简单。 #lists ul是我试图更改其宽度的元素，而#lists是引用元素。我的问题是，有没有办法达到这个效果？或者我应该使用不同的方法？谢谢你的帮助！

Answer 1

无需使用JavaScript来调整宽度。这应该是你所需要的：

#lists ul { width: 100%; }

Answer 2

你想要做的事听起来很疯狂。正如其他人所指出的那样，在CSS中使用一个百分比可能更聪明。

如果你坚持这样做的话......我猜你的事件是在$(document).ready()内解雇的。相反，试试这个。

$(window).resize(function(){
     $("#lists ul").css("width", $("#lists").width());
});

Answer 3

您可以结合使用JavaScript和CSS。我不知道您的具体需求是什么，但您可以轻松设置对象的宽度，如下所示：

var element=document.getElementById("my_element");
element.style.width=10+"px";// Simple as that.

如果您只想根据其父元素的大小来缩放元素，最好使用CSS百分比宽度和高度。

CSS：

#my_element{
    width:20%;
}

然后，只要调整父元素的大小，CSS就会处理所有缩放需求。

CSS本身可能看起来不像你想要的那样，但是如果你确保定义元素的所有适用的CSS属性（如边距，填充，边框等等），然后使用它来支持布局JavaScript，你可以做很多。