Question

我正在努力使用我的网页

document.getElementById("btn").addEventListener("click", function(){
  var g = document.getElementById("guitar");
  console.log("Styles:", g.style.left,g.style.top, g.style.width,g.style.height, g.style.background);
});

  <html>
    <head>
      <style>
    
      .stage {
    	position:relative; width:400px;height:300px;background:brown;
      }
    
      .guitar {
    	position:absolute;    	left:20px;    	top:10px;    	width:150px;    	height:150px;    	background:#f63f63;
      }
    
      </style>
    </head>
    <body>
    
      <input type="button" id="btn" value="Do something" />
    
      <div class="stage" id="stage">
        <div class="guitar" id="guitar" />
      </div>
    <body>
  </html>

如果你注意到最后一行代码，我指的是吉他的g（我知道错误的命名等等，我只是在这里搞乱）。

我的问题是，当我将注意放在g上并展开属性并导航到样式时，没有（样式列表中没有值）。即使背景显示空值，但HTML正确呈现它。

为什么我看不到监视窗口中的值？

Answer 1

您的g元素没有任何样式属性 ...

您可以在＆＃39;计算样式＆＃39;上看到所有样式定义，因为它们是常规的css声明，而不是通过属性定义。

Answer 2

尝试window.getComputedStyle（g，null）.getPropertyValue（＆＃34; height＆＃34;）;

这应该可以解决问题

Answer 3

来自https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style：

HTMLElement.style属性返回一个CSSStyleDeclaration对象，该对象仅表示元素的内联样式属性，忽略任何应用的样式规则。

这意味着如果您有一个元素<div style="left: 10px;">，那么它的样式对象将包含left值，但如果您只有一个CSS规则div { left: 10px; }则不会。

如前所述，您可以使用getComputedStyle()来获取CSS应用的实际样式。

学习JS - 为什么我的元素没有任何样式

3 个答案: