如何使用 JavaScript 動態修改 CSS 樣式
要使用 JavaScript 動態變更元素的 CSS 屬性,可以採用多種方法。最通用的方法之一是使用元素的 style 屬性。此屬性提供對為元素定義的所有內聯樣式的存取。
考慮以下 HTML 和 CSS 片段:
<div class="left"> Hello </div> <div class="center"> <div class="left1">
.left, .right { margin: 10px; float: left; border: 1px solid red; height: 60px; width: 60px; } .left:hover, .right:hover { border: 1px solid blue; } .center { float: left; height: 60px; width: 160px; } .center .left1, .center .right1 { margin: 10px; float: left; border: 1px solid green; height: 60px; width: 58px; }
在此片段中,我們有三個元素(左,中、右),每個都有不同的類別。當滑鼠懸停在左側或右側元素上時,它們會將邊框顏色變更為藍色。
要讓滑鼠停留在左側時顯示left1 元素,在滑鼠停留在右側時顯示right1,我們可以使用JavaScript:
document.querySelector('.left').addEventListener('mouseenter', () => { document.querySelector('.left1').style.display = 'block'; }); document.querySelector('.left').addEventListener('mouseleave', () => { document.querySelector('.left1').style.display = 'none'; }); document.querySelector('.right').addEventListener('mouseenter', () => { document.querySelector('.right1').style.display = 'block'; }); document.querySelector('.right').addEventListener('mouseleave', () => { document.querySelector('.right1').style.display = 'none'; });
在此JavaScript 程式碼中,我們使用addEventListener 方法將事件偵聽器附加到mouseenter 和mouseleave 事件的左側和右側元素。當滑鼠進入元素時,透過將其顯示樣式變更為阻止,使對應的隱藏元素可見。當滑鼠離開元素時,隱藏的元素會再次隱藏。
使用 style 屬性動態變更 CSS 屬性,可以讓您非常靈活地修改網頁中元素的外觀。
以上是如何使用 JavaScript 事件監聽器動態修改 CSS 樣式?的詳細內容。更多資訊請關注PHP中文網其他相關文章!