document.getElementsByClassName

document.getElementsByClassName

111

222

333

<style>.C1{ width: 45%; height: 300px; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; background-color: rgb(204, 204, 204); border-radius: 10px 10px 10px 10px ; border: 10px ridge pink; font-size: 25px ; float:left; } </style> <div id="div1" class="C1" onclick="DF0()">click me</div><div id="div2" class="C1" onclick="DF1()"> click me</div> <script>function DF0() { var x = document.getElementsByClassName("C1"); x[0].style.backgroundColor = "red"; var TxT = '<font size="6">' TxT += 'my class is C1 <br><br>' ; TxT += '<font size="3">' TxT += 'var x = document.getElementsByClassName("C1"); <br>' TxT += 'x[0].style.backgroundColor = "red";' TxT += '' x[0].innerHTML = TxT; } function DF1() { var x = document.getElementsByClassName("C1"); x[1].style.backgroundColor = "cyan"; var TxT = '<font size="6">' ; TxT += 'my class is C1 <br><br>' ; TxT += '<font size="3">' TxT += 'var x = document.getElementsByClassName("C1"); <br>' TxT += 'x[1].style.backgroundColor = "cyan";' TxT += '' x[1].innerHTML = TxT; } </script>

00

#html document.getElementsByClassName 元素列表#script document.getElementsByClassName 元素列表#html getElementsByClassName 元素列表#script getElementsByClassName 元素列表