Question

我必须有一些简单的东西。我只使用vanilla Javascript来返回DOM元素属性。问题是，当我尝试从DOM元素中获取任何样式属性时，我只获得空字符串。

以下是我的HTML代码段：

<div class="parent">
   <div class="child js-child">
   </div>
</div>

这是CSS：

.parent {
   position: relative;
}

.child {
   position: absolute;
   right: -220px;
   top: 0;
   transition: all 0.5s ease;
}

一些JS代码：

window.addEventListener("load", function(){
   var element = document.getElementsByClassName("js-child")[0];
   var rightPosition = element.style.right;
});

当我输入调试器并检查值rightPosition = ""。

时

应该是rightPosition = "-220px"。无论我想要获得什么属性，它都会以""的形式返回（我已经尝试过检查显示器，顶层属性以及其他几个属性）。

我想运行一个简单的if语句if (rightPosition === "-220px")，但它总是以空字符串形式返回，所以if语句不会检出。

当我查看chrome检查器时，所有CSS都已正确设置并正常工作。

关于我为什么只得到空字符串的任何想法？

谢谢！

Answer 1

您可以使用getComputedStyle和getPropertyValue。 element.style将引用元素的style属性（内联样式），并且您的CSS不是内联的。

window.addEventListener("load", function(){
   var element = document.getElementsByClassName("js-child")[0];
   var rightPosition = window.getComputedStyle(element).getPropertyValue('right');
  console.log(rightPosition)
});

.parent {
   position: relative;
}

.child {
   position: absolute;
   right: -220px;
   top: 0;
   transition: all 0.5s ease;
}

<div class="parent">
   <div class="child js-child">
   </div>
</div>

Answer 2

元素的style属性表示元素html的内联样式属性。您正在寻找的是计算出的样式

var rightPosition = window.getComputedStyle(element).getPropertyValue('right');

Answer 3

你不能直接从JS获得外部css。使用getComputedStyle然后getPropertyValue。

window.addEventListener("load", function(){
   var element = document.getElementsByClassName("js-child")[0];
   var rightPosition = window.getComputedStyle(element,null).getPropertyValue('right');
   console.log(rightPosition);
});

.parent {
   position: relative;
}

.child {
   position: absolute;
   right: -220px;
   top: 0;
   transition: all 0.5s ease;
}

<div class="parent">
   <div class="child js-child">
   Hello world
   </div>
</div>

参考：https://stackoverflow.com/a/2558076/2427065

Answer 4

Presa CTRL + F5清算现金然后尝试，如果它不起作用，尝试在addEventListener函数之外设置变量只是为了测试代码，同时删除var关键字以设置变量global ..并检查：）

为什么我的所有DOM元素属性都以空字符串形式返回？

4 个答案: