javascript - 使用 JS 如何获取 div 的 flex-direction 属性的值？

Question

在尝试使用 Windows Chrome 59 解决这个问题时，我使用了 devtools 来检查属性。

let el = document.getElementById("divId");

然后通过检查 el 的值，我看到对象结构显示:

>style:CSSStyleDeclaration

然后单击指针展开样式，我看到它的对象结构显示了 flexDirection 的属性:“”(空)。我知道我的 css 已将 flex-direction 设置为 column:

flex-direction: column;

是否无法检索我的程序设置的这个值？我需要从 flex-direction: row 看到这个变化来切换我的 js 代码的大小调整逻辑。

Answer 1

您可以使用 window.getComputedStyle() 获取它. getComputedStyle 返回 CSSStyleDeclaration对象，您可以使用 getPropertyValue() 方法或直接访问该属性来获取所需属性的值。

const el = document.getElementById("divId");

const style = window.getComputedStyle(el);

console.log(style.getPropertyValue('flex-direction')); // using the method

console.log(style.flexDirection); // accessing the property

#divId {
  display: flex;
  flex-direction: column;
}

<div id="divId"></div>