使用JS,我如何获得div的flex-direction属性的值?

时间:2017-07-14 13:49:25

标签: javascript css flexbox

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

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

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

>style:CSSStyleDeclaration

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

flex-direction: column;

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

1 个答案:

答案 0 :(得分: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>