javascript - 使用类似表格的行为时如何获取元素宽度

Question

我不得不将多个 div 排成一行(水平)在另一个 div 中。所以我这样做了:

for(var i = 0; i < 10; i++) {
    var elem = document.createElement("div");
    elem.className = "day_cell";
    elem.id = 'p'+i;
    document.getElementById("day_scale").appendChild(elem);
}

#day_scale {
    position: absolute;
    display: table;
    width: 100%;
    top: 50%;
    table-layout: fixed;
    border-spacing: 1px;
}

        
.day_cell {
    display: table-cell;
    background-color: #a9cce3;
    padding: 3px;

    box-sizing: border-box;
    -moz-box-sizing: border-box;

    border: 1px solid black;
    border-radius: 2px;

    overflow: hidden;
}

<div id="day_scale">
    	
</div>

现在我需要知道那些 .day_cell 元素的宽度。我试过这个:

var parts = document.getElementsByClassName("day_cell");
console.log(parts[0].style.width)

但它不起作用。我如何获得这些元素的宽度？此外，如果我更改浏览器窗口宽度，元素的宽度也会更改。每次更改时如何获得新的宽度？

Answer 1

可以得到非inline的宽度通过他们的元素 clientWidth property .

var width = theElement.clientWidth;

四舍五入为整数像素(元素的宽度可以包含小数部分的像素)。您也可以使用 getBoundingClientRect 在页面上获取完整的分数值和有关元素尺寸的其他信息。

实例:

for(var i = 0; i < 10; i++) {
    var elem = document.createElement("div");
    elem.className = "day_cell";
    elem.id = 'p'+i;
    document.getElementById("day_scale").appendChild(elem);
}

setTimeout(function() {
    console.log(document.querySelector(".day_cell").clientWidth);
}, 100);

#day_scale {
    position: absolute;
    display: table;
    width: 100%;
    top: 50%;
    table-layout: fixed;
    border-spacing: 1px;
}

        
.day_cell {
    display: table-cell;
    background-color: #a9cce3;
    padding: 3px;

    box-sizing: border-box;
    -moz-box-sizing: border-box;

    border: 1px solid black;
    border-radius: 2px;

    overflow: hidden;
}

<div id="day_scale">
    	
</div>

原因.style.width不起作用是它只返回 width 的值元素内联样式 style属性(例如 "50px" 表示 <div style="width: 50px"></div> )，而不是元素的实际宽度。如果元素没有内联 style属性，或者该内联样式属性没有 width风格，.style.width返回 "" .