Question

这是我的html文件，包含多个div，我希望在每个div元素中添加蓝色边框

＆＃13;

<div class="myDiv">
<p><span style="color: #00bcf4;"><strong>1) <u>Units of Measurement</u></strong></span></p>
<p><strong><em>@ K</em></strong><em>ing &nbsp;<strong>H</strong>ector&nbsp; <strong>D</strong>ied &nbsp;<strong>M</strong>ysteriously&nbsp;<strong>D</strong>rinking&nbsp;</em></p>
<span style="color: #0000ff;"><strong>&nbsp; &nbsp;K</strong>ilo&nbsp;&nbsp;<strong>H</strong>ecto&nbsp; &nbsp;<strong>D</strong>eka &nbsp;<strong>M</strong>eter&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong>D</strong>eci&nbsp;&nbsp;&nbsp;&nbsp;</span>
<p>&nbsp;</p>
<p><strong><em>C</em></strong><em>hoklate&nbsp;<strong>M</strong>ilk</em></p>
<span style="color: #0000ff;"><strong>C</strong>enti&nbsp;&nbsp;&nbsp;&nbsp; Milli</span>
<p>&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;</p>
</div>

<div class="myDiv">

<p><span style="color: #00bcf4;"><strong><u>2) Tens ' Multipliers</u></strong></span></p>
<p><strong><em>@ D</em></strong><em>esi&nbsp;</em>&nbsp; &nbsp;<strong><em>H</em></strong><em>ero</em>&nbsp;&nbsp;<strong><em>K</em></strong><em>illed&nbsp;<strong>M</strong>ega&nbsp;<strong>G</strong>igantic&nbsp;<strong>T</strong>errorists</em></p>
<span style="color: #0000ff;"><strong>&nbsp;&nbsp; D</strong>ekka&nbsp;&nbsp;<strong>H</strong>ecto &nbsp;<strong>K</strong>ilo&nbsp;&nbsp;<strong>M</strong>ega&nbsp;&nbsp;<strong>G</strong>iga&nbsp;&nbsp;&nbsp;&nbsp;<strong>T</strong>era</span>
<p>&nbsp; &nbsp;10<sup>1</sup>&nbsp;&nbsp;&nbsp;&nbsp;10<sup>2</sup>&nbsp;&nbsp;&nbsp;&nbsp;10<sup>3</sup>&nbsp; &nbsp;10<sup>6</sup>&nbsp;&nbsp;&nbsp;&nbsp;10<sup>9</sup>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;10<sup>12</sup></p>
<p>&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;</p>
</div>

＆＃13;

我尝试用这个但是它没有工作

＆＃13;

<script>
function myFunction() {
    document.getElementByClassName("myDiv").style.border = "thick solid #0000FF";
}

</script>

<button type="button" onclick="myFunction()">Set border</button>

＆＃13;

此外，我想将该功能设置为在页面加载时自动加载。

提前致谢。

Answer 1

为什么不使用CSS？

.myDiv{
    border: thick solid #0000ff;
}

或者如果您需要使用JS，请使用

document.querySelectorAll('.myDiv').forEach( div => {
    div.style.border = 'thick solid #0000ff';
});

Answer 2

在页面加载时运行您的函数非常简单：

<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function myFunction() {
            document.getElementByClassName("myDiv").style.border = "thick solid #0000FF";
        }
        </script>
    </head>
    <body onload="myFunction();">

    </body>
</html>

对于边框（使用JavaScript）：

document.getElementsById("myDiv").style.border = "thick solid #0000FF";

警告getElement s ById

Answer 3

var myDivs=document.getElementsByClassName("myDiv");
for(var i=0; i<myDivs.length;i++){
    myDivs[i].style.border = "thick solid #0000FF";
}

请记住，getElementByClassName确实存在。 getElementsByClassName会返回包含该类的所有div的HTML集合。

Answer 4

使用jquery设置div中每个元素的边框（在我看来，p是div的元素）

     <div class="mydiv">
      <p>test1</p>
      <p>test2</p>
      <p>test3</p>
      </div>

      <script>
      $(document).ready(function(){
      $(".mydiv p").css('border','1px solid red')
      });
     </script>

如何通过类名在div周围放置边框

4 个答案: