Question

我正在尝试更改绝对定位div的左侧位置。该样式使用以下内容在css中预先声明：

#menu {
   position:absolute;
   width:200px;
   min-height:40%;
   left:-200px;
}

现在，当我尝试检查left使用javascript的值时，它显示为""。以下JS用于检查值：

var menuElement = document.getElementById('menu');
console.log(menuElement.style.left);

我已将this codepen设置为演示。请注意，对于负值和正左值都会发生这种情况。

为什么左边的值总是""？

就此而言，似乎任何样式元素都显示为""。为什么会这样？

Answer 1

您必须使用getComputedStyle()来获取通过样式表声明的规则。

＆＃13;

var menuElement = document.getElementById('menu');
var menuElement2 = document.getElementById('menu2');

console.log(getComputedStyle(menuElement).left);
console.log(getComputedStyle(menuElement2).left);

console.log(getComputedStyle(menuElement));
console.log(getComputedStyle(menuElement));

＆＃13;

#menu {
  position: absolute;
  width: 200px;
  min-height: 40%;
  left: -200px;
  background-color: black;
}
#menu2 {
  position: absolute;
  width: 200px;
  min-height: 40%;
  left: 200px;
  background-color: black;
}

＆＃13;

<div id="menu"></div>
<div id="menu2"></div>

＆＃13;

div的左元素是空字符串

1 个答案: