Question

我有一个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对象仅反映应用于元素的直接样式。类所应用的样式不会显示在那里。要获得这些，请使用getComputedStyle（标准）或currentStyle（特定于IE）：

标准

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

IE特异性：

console.log(myDiv.currentStyle.backgroundPositionY);

标准示例：

＆＃13;

var myDiv = document.getElementsByClassName('myDiv')[0];

console.log(getComputedStyle(myDiv).backgroundPositionY);

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

要达到预期效果，请使用以下

var divElem = document.querySelector('.myDiv');
style = getComputedStyle(divElem)
console.log(style.backgroundPositionY);

Codepen - https://codepen.io/nagasai/pen/MmEjjr?editors=1111

Answer 3

以下JavaScript工作原理：

var myDiv = document.getElementsByClassName('myDiv')[0],
    _tmp =     window.getComputedStyle(myDiv,null).backgroundPosition.trim().split(/\s+/),
    positions = {
        'left' : _tmp[0],
        'top' : _tmp[1]
    };
console.log(positions, positions.left, positions.top);

reference

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

3 个答案: