如何使用 JS innerHTML 打印 div 宽度或颜色？ [复制]答案

【问题标题】：How to print div width or color with JS innerHTML? [duplicate]如何使用 JS innerHTML 打印 div 宽度或颜色？ [复制]
【发布时间】：2016-05-27 06:02:52
【问题描述】：

我不知道如何使用 getElementById().innerHTML 获取 CSS 参数（专有名词？）或值以显示在诸如 p 之类的东西中。抱歉，这是两个问题——当 CSS 值是数字时，我是否需要使用 toString 或类似的东西？

我会很感激一个纯 JS 的答案，但如果你认为 jQuery 是最好的，它也很好。我正在手机中的一个名为 HTML + CSS + Javascript 的应用程序上执行此操作——我不知道如何访问 jQuery 库。

HTML：

<body>
     <h1>Practice Page</h1>
    <div id="box">
        <div id="runner"></div>
    </div>
  <p id="color"></p>

  <p id="width"></p>

    <script src="practiceA.js" type="text/javascript"></script>

</body>
</html>

JS：

document.getElementById('color').innerHTML=
document.getElementById('runner').style.backgroundColor;

document.getElementById('width').innerHTML=
document.getElementById('box').style.width;

还有 CSS：

#runner{
  height:10px;
  width:10px;
  background-color: red; 
}

#box{
   height:100px;
   width:100px;
   border:1px solid black;
}

【问题讨论】：

标签： html width innerhtml

【解决方案1】：

You can't access CSS properties that were set from a CSS file using element.style 。相反，您需要使用getComputedStyle，但这可能会使浏览器兼容性变得混乱，所以我建议使用如下所示的 jQuery。（如果你选择不使用 jQuery，我链接的答案有一个很好的帮助函数，你可以使用）

jQuery 示例：

$('#color').html($('#runner').css('backgroundColor'));

#runner{
  height:10px;
  width:10px;
  background-color: red; 
}

#box{
   height:100px;
   width:100px;
   border:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
<h1>Practice Page</h1>
<div id="box">
    <div id="runner"></div>
</div>
<p id="color">x</p>

<script src="practiceA.js" type="text/javascript"></script>

</body>

【讨论】：

我认为这回答了我的问题，并且副本的链接确实如此，但它并没有向我展示如何在屏幕上显示该数字。我可能有定义为我想要的值的变量，但我看不到它们。如果我想将它们视为innerHTML，是否需要使用toString？作为 document.write，我认为不会？
没关系！现在我了解了 jQuery。不过，仍在尝试看看它是否有效......