在那個html中
<article id="art">
<h1 class="hstyle">1</h1>
<p class="pstyle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, sed.</p>
</article>
<article id="art">
<h1 class="hstyle">2</h1>
<p class="pstyle">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste, cumque!</p>
</article>
<article id="art">
<h1 class="hstyle">3</h1>
<p class="pstyle">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis, officia!</p>
</article>
<article id="art">
<h1 class="hstyle">4</h1>
<p class="pstyle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, consequatur!</p>
</article>
<article id="art">
<h1 class="hstyle">5</h1>
<p class="pstyle">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vero, sed.</p>
</article>
<article id="art">
<h1 class="hstyle">6</h1>
<p class="pstyle">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officia, asperiores?</p>
</article>
</div>
在 javascript 中，我想更改所有文章 onm ouseover 的背景顏色，同時更改 h1 和 p 文本顏色 onm ouseover 我可以在 js 中更改背景顏色的文章：
a = document.getElementsByTagName("article");
h = document.getElementsByClassName("hstyle");
p = document.getElementsByClassName("pstyle");
console.log(a);
console.log(h);
console.log(p);
for (i in a) {
a[i].onmouseover = function () {
this.style.backgroundColor = "black";
};
a[i].onmouseout = function () {
this.style.backgroundColor = "white";
};
};
但正如你所看到的，我不能再進一步了，我們將不勝感激。
uj5u.com熱心網友回復：
您可以簡單地更改您的顏色屬性articles：
顯示代碼片段
a = document.getElementsByTagName("article");
h = document.getElementsByClassName("hstyle");
p = document.getElementsByClassName("pstyle");
for (i in a) {
a[i].onmouseover = function () {
this.style.backgroundColor = "black";
this.style.color = "white";
};
a[i].onmouseout = function () {
this.style.backgroundColor = "white";
this.style.color = "black";
};
};<div>
<article id="art">
<h1 class="hstyle">1</h1>
<p class="pstyle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, sed.</p>
</article>
<article id="art">
<h1 class="hstyle">2</h1>
<p class="pstyle">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste, cumque!</p>
</article>
<article id="art">
<h1 class="hstyle">3</h1>
<p class="pstyle">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis, officia!</p>
</article>
<article id="art">
<h1 class="hstyle">4</h1>
<p class="pstyle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, consequatur!</p>
</article>
<article id="art">
<h1 class="hstyle">5</h1>
<p class="pstyle">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vero, sed.</p>
</article>
<article id="art">
<h1 class="hstyle">6</h1>
<p class="pstyle">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officia, asperiores?</p>
</article>
</div>或使用 CSS ：
顯示代碼片段
article:hover {
background-color: black;
color: white;
}<div>
<article id="art">
<h1 class="hstyle">1</h1>
<p class="pstyle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, sed.</p>
</article>
<article id="art">
<h1 class="hstyle">2</h1>
<p class="pstyle">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste, cumque!</p>
</article>
<article id="art">
<h1 class="hstyle">3</h1>
<p class="pstyle">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis, officia!</p>
</article>
<article id="art">
<h1 class="hstyle">4</h1>
<p class="pstyle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, consequatur!</p>
</article>
<article id="art">
<h1 class="hstyle">5</h1>
<p class="pstyle">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vero, sed.</p>
</article>
<article id="art">
<h1 class="hstyle">6</h1>
<p class="pstyle">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officia, asperiores?</p>
</article>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/408124.html
標籤：
上一篇：將變數內容匯出到檔案