使用 Vanilla javascript 设置元素高度等于宽度

Question

我有一个包含 10 个元素的节点列表，我在下面使用它们：

let elements = document.getElementById('all-photos-root').querySelectorAll('.photo-root');

这给了我一个包含 10 个元素的 NodeList。每个元素的初始宽度以百分比设置，即 25%。我想将每个元素的高度设置为等于像素宽度，以便它始终呈现为正方形。

我像下面这样做，但我总是得到宽度未定义。

for (var i = 0; i < elements.length; i++) {
    console.log('elements', elements[i], elements[i].style.width);
    elements[i].style.height = elements[i].style.width;
}

Answer 1

使用Element#style只会获取已内联设置的属性（style，css上的属性不会被包含在内）。

如果您想获取当前活动的属性，您应该使用getComputedStyle.

您还可以使用offsetWidth,clientWidth或scrollWidth来获取块的宽度（以像素为单位）（以数字格式）。

var foo = document.getElementById("foo");
var bar = document.getElementById("bar");
var fooBar = document.getElementById("foo-bar");

console.log("Foo:");
console.log(foo.style.width); // 30px
console.log(getComputedStyle(foo).width); // 30px
console.log(foo.offsetWidth);

console.log("Bar:");
console.log(bar.style.width); // hasn't been defined using style attribue
console.log(getComputedStyle(bar).width); // 40px as defined in #bar css block
console.log(bar.offsetWidth);

console.log("FooBar:");
console.log(fooBar.style.width); // hasn't been defined using style attribute
console.log(getComputedStyle(fooBar).width); // will actually give the absolute width in `px` instead of the `50%` used in css block
console.log(fooBar.offsetWidth);

#bar {
  width: 40px;
}

#foo-bar {
  width: 50%;
}

<div id="foo" style="width: 30px;"></div>
<div id="bar"></div>
<div id="foo-bar"></div>