Question

我无法弄清楚如何使用getElementById（）。innerHTML来获取CSS参数（正确的术语？）或值以显示在p之类的内容中。我道歉但这有两个问题 - 当CSS值是一个数字时，我是否需要使用toString或那种性质的东西？

我很欣赏纯粹的JS答案，但如果你认为jQuery最好的话，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;
}

Answer 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>

如何用JS innerHTML打印div宽度或颜色？

1 个答案: