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

【问题标题】：Learning JS - why do my elements not have any styles学习 JS - 为什么我的元素没有任何样式
【发布时间】：2016-08-02 22:35:24
【问题描述】：

我正在为我的网页而苦恼

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 正在正确呈现它。

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

【问题讨论】：

@MyDaftQuestions 然后不要包含函数。删除所有不相关的代码，不要只是删除函数体，而是保留它们的调用。我修复了您的问题，使其包含一个实际运行的最小 complete 示例，但在您发布它的状态下，您的问题应该已经关闭。

标签： javascript watch

【解决方案1】：

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

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

【讨论】：

哦，伙计……就是这样。我对类和样式感到困惑

【解决方案2】：

试试 window.getComputedStyle(g,null).getPropertyValue("height");

这应该可以解决问题

【讨论】：

【解决方案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 应用的实际样式。

【讨论】：