Question

现在，我有100％是square，定义为div.newsticker
我想在加载时获得此宽度，或者在调整大小时获得此宽度。

如何使用javascript进行操作？

div.newsticker{
    border:1px solid #666666;
    width:100%;
    height:50px;
}

.newsticker p{
    height:20px;
    width:150px;
    float:left;
    position:absolute;
}

Answer 1

你可以在jQuery中得到它。

On Load

jQuery(document).ready(function() {
   jQuery("div.newsticker").width()
});

On Resize

jQuery(window).on("resize", function() {
   var width = jQuery(".newticker").width();
});

Answer 2

当您使用jQuery时，只需使用width函数：

// On load (use `ready` or whatever other load event you think appropriate)
$(doSomethingWithWidth);                    // Called on DOM ready
// and/or
$(window).on("load", doSomethingWithWidth); // Called on window load (very late)

// To get resize notification
$(window).on("resize", doSomethingWithWidth);

// And the function
function doSomethingWithWidth() {
    var width = $(".newticker").width();
    // ...
}

您还可以查看innerWidth和outerWidth。

Answer 3

使用jQuery的.width()，.innerWidth()或.outerWidth()。

.outerWidth(true) - 全宽（带边距，填充，边框）

$("element").width();

调整大小时调用它：

$(window).on("resize",function(){
    // DO SOME STUFF
});

Answer 4

加载：

var w = 0;
window.onload = function() {
  w = document.getElementsByClass("newsticker")[0].width;
}

继续改变窗口的尺寸

window.onresize = function() {
  w = document.getElementsByClass("newsticker")[0].width;
}

Answer 5

以下两个答案将对您有所帮助：

这告诉你如何获得宽度。我会在jQuery $(document).ready(function () { - https://stackoverflow.com/a/294273/2402338

中运行它

其他人已经发布了如何在窗口调整大小时获取元素的维度，但我不确定这是否是您需要调整大小的正确上下文。如果没有，此Q / A可能会对您有所帮助 - https://stackoverflow.com/a/3444837/2402338

如何在加载时获取div元素的宽度，以及何时调整大小？

5 个答案: