Question

这是我有2个div的html。我想为每个div设置单独的边框。当我为这两个div使用方法单独的ID时，它可以工作，但是当我使用类时它没有。如何使用相同的类名称为多个div设置边框。

<body onload="myFunction()">

<script>
function myFunction() {

    document.getElementByClassName("myDiv").style.border = "thin solid #0000FF";

}

</script>




<style type="text/css">
	.myDiv {

		border: "thick solid #0000FF;"
	}
</style>

<p>&nbsp;</p>
<h1><strong style="color: #ff0000;">Mechannics</strong></h1>
<div>
<div class="rawal">
<p>&nbsp;</p>
<div class="myDiv" style="padding: 8px;">
<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>

<br>
<br>

<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>

这是我想要获得的图像，当我使用单独的Id时，我得到的图像并使用函数

 document.getElementById("myDiv").style.border = "thin solid #0000FF";


document.getElementById("myDivv").style.border = "thin solid #0000FF";

Issue

Answer 1

你错过了＆＃34; s＆＃34;在函数的名称中，它是getElementsByClassName，但如果您使用getElementById，则不使用＆＃34; s＆＃34;。

Answer 2

首先所有getElementsByClassName而非getElementByClassName缺少 s

其次它返回所有子节点的类数组对象，因此您必须使用循环来应用其所有子节点的css样式。

建议： querySelectorAll()在您想要使用更复杂的选择器并具有出色的浏览器兼容性时更有用

因此，您可以尝试使用getElementsByClassName返回具有所有给定类名的所有子元素的类数组对象，并循环遍历它们以应用您的css样式。

<body onload="myFunction()">

<script>
function myFunction() {
 
  var cols = document.getElementsByClassName('myDiv');
  for(i=0; i < cols.length; i++) {
    cols[i].style.border='thin solid #0000FF';
    linebreak = document.createElement("br");
    cols[i].after(linebreak);
  }
}

</script>

<style type="text/css">
	.myDiv {
		border: "thick solid #0000FF;"
	}
</style>

<p>&nbsp;</p>
<h1><strong style="color: #ff0000;">Mechannics</strong></h1>
<div>
<div class="rawal">
<p>&nbsp;</p>
<div class="myDiv" style="padding: 8px;">
<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>

Answer 3

没有“document.getElementByClassName” - 你所追求的是document.getElement s ByClassName。它将所有元素作为与该类名匹配的Array返回。然后你只需要从数组中选择你想要的那个。

请在此处查看相关文档：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

document.getElementByClassName不起作用但document.getElementById有效

3 个答案: