[英]onmouseover function didn't work
我在網上找到的所有例子都不適用於我。 我想要的是當鼠標在它上面時改變文本的顏色。 並且當移動鼠標以獲得舊顏色(並且可能改變尺寸,但是如果那還不復雜)我知道如何在CSS中這樣做但我正在學習JS,這就是我想要的方式。 文本中只有一個單詞,因此它是Class而不是ID。
document.getElementsByClassName("akcija").addEventListener("mouseover", mouseOver); document.getElementsByClassName("akcija").addEventListener("mouseout", mouseOut); function mouseOver() { document.getElementsByClassName('akcija').style.color = "black"; } function mouseOut() { document.getElementsByClassName('akcija').style.color = "Blue"; }
<div class="akcija" style="width:200px; height:200px"></div>
document.getElementsByClassName
方法返回一個nodeList
,因此,您可以使用其索引 (從零開始)訪問DOM
元素。
嘗試這個:
document.getElementsByClassName('akcija')[0].style.color = "black";
如果您使用的是ES6
,則可以使用Array.from
方法執行此操作。
Array.from(document.getElementsByClassName('akcija')).forEach(function(element) {
element.addEventListener('mouseover', mouseOver);
});
正確的代碼實現恕我直言
var akcjijas = document.getElementsByClassName("akcija"); for (var i in akcjijas) { if (akcjijas.hasOwnProperty(i)){ akcjijas[i].addEventListener("mouseover", mouseOver); akcjijas[i].addEventListener("mouseout", mouseOut); } } function mouseOver() { this.style.color = "black"; } function mouseOut() { this.style.color = "Blue"; }
<div class="akcija" style="width:200px; height:100px;background-color: yellow">Akcija</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.