javascript - 尝试在 Chrome 控制台中返回背景位置值时出现空白条目

Question

这个问题已经有答案了:

Reading CSS value using JavaScript (7 个回答)

How to get an HTML element's style values in JavaScript? (5 个回答)

已关闭 6 年前。

我有一个 div，其背景图像位于 X 0px 和 Y 0px 位置。现在我想在 console.log 中返回这些值，但控制台显示一个空白条目。我尝试使用警报，结果是一样的。

为什么会发生这种情况？

var myDiv = document.getElementsByClassName('myDiv')[0];

console.log(myDiv.style.backgroundPositionY);

.myDiv{
  width:200px; height:200px;
  background:blue;
  background-image:url(http://www.shunvmall.com/data/out/141/46916550-landscape-pictures.jpeg);
  background-repeat:no-repeat;
	background-position:0px 0px;
	background-size:cover;
}

<div class="myDiv"></div>

Answer 1

元素上的style对象仅反射(reflect)直接应用于该元素的样式。类应用的样式不会显示在那里。要获取这些，请使用 getCompulatedStyle (标准)或 currentStyle (特定于 IE):

标准:

console.log(getComputedStyle(myDiv).backgroundPositionY);

特定于 IE:

console.log(myDiv.currentStyle.backgroundPositionY);

标准示例:

var myDiv = document.getElementsByClassName('myDiv')[0];

console.log(getComputedStyle(myDiv).backgroundPositionY);

.myDiv{
  width:200px; height:200px;
  background:blue;
  background-image:url(http://www.shunvmall.com/data/out/141/46916550-landscape-pictures.jpeg);
  background-repeat:no-repeat;
	background-position:0px 0px;
	background-size:cover;
}

<div class="myDiv"></div>