JS 操作 DOM 改變方塊顏色

Brocadecarp發表於2019-04-01
JS

由於從轉前端一年左右，都是直接接觸框架，而並沒有踏踏實實學習相關基礎，所以，最近開始認認真真，踏踏實實的把基礎的東西都過一遍。目前正在學習如何操作 DOM，自己寫了個小 Demo，就是滑鼠滑過時，改變方塊顏色。

思路就是獲取 DOM，給 DOM 新增滑鼠滑過時觸發的事件，通過改變其子元素的背景顏色來實現，核心的 JS 程式碼如下：

<script type="text/javascript">  
    // 頁面載入成功後呼叫  
    window.onload = function () {    
        // 拿到 ul DOM    
        var ul = document.getElementsByName('ul')[0]    
        // 給 ul 新增事件：滑鼠滑過觸發事件    
        ul.onmouseover = function (e) {      
            var event = e || window.event // 相容性問題，有的瀏覽器拿不到 e      
            var target = event.target || event.srcElement // 相容性問題，有的瀏覽器事件源物件不一致，此處的 target 是 li      
            target.style.backgroundColor = 'rgb(200, 200,' + target.getAttribute('img-data') + ')'// 改變背景顏色      
            target.setAttribute('img-data', parseInt(target.getAttribute('img-data') + 5)) // 改變 img-data 的值    
        }  
    }
</script>複製程式碼

最後附上 DEMO


相關文章