javascript - 使用 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 获取 block 的宽度(以像素为单位(数字格式))。

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>