0039.隔行變色案例：進一步強化自定義屬性編程思想 · 原生js-2020

~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <title>珠峰培訓 - 微信：18310612838</title>  <link rel="stylesheet" href="reset.min.css"> <style> .newsItem { margin: 20px auto; width: 500px; } .newsItem li { line-height: 40px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; border-bottom: 1px dashed lightgray; } /* 奇偶行變色，鼠標滑過有高亮選中效果，鼠標離開回歸原本的顏色 => 真實項目中一定是基于CSS3完成的 */ .newsItem li:nth-child(even) { background: lightcyan; } .newsItem li:hover { background: lightcoral; } </style> </head> <body> <ul class="newsItem" id="newsItem"> <li>歡迎大家來到珠峰培訓學習</li> <li>我們期望通過一門技術的學習，讓大家養成成功者應該具備的基本素質</li> <li>課程中涉及基礎知識、大量企業原版實戰、各種底層源碼的研究</li> <li>學會60%找份工作沒啥問題，學會80%薪資一萬大幾，學會100%，你想去哪和我說，我給你推！</li> <li>大家要堅信：未來的生活是由自己現在的努力來決定的，所以堅持四個月！</li> <li>我們課程四個月，前兩周免費學，考試通過，報名繳費，正式課前兩周可無條件退費</li> </ul>  <script> var newsItem = document.getElementById('newsItem'), itemList = newsItem.getElementsByTagName('li'); //===========基于LET解決（原理上和閉包類似） for (let i = 0; i < itemList.length; i++) { let item = itemList[i], bg = '#FFF'; i % 2 === 1 ? bg = 'lightcyan' : null; item.style.backgroundColor = bg; item.onmouseover = function () { item.style.backgroundColor = 'lightcoral'; }; item.onmouseout = function () { item.style.backgroundColor = bg; }; } //=============基于閉包解決（沒有兼容性）正式課第一周講 for (var i = 0; i < itemList.length; i++) { (function (i) { var item = itemList[i], bg = '#FFF'; i % 2 === 1 ? bg = 'lightcyan' : null; item.style.backgroundColor = bg; item.onmouseover = function () { item.style.backgroundColor = 'lightcoral'; }; item.onmouseout = function () { item.style.backgroundColor = bg; }; })(i); } //===============基于自定義屬性解決（沒有兼容性） for (var i = 0; i < itemList.length; i++) { var item = itemList[i], bg = '#FFF'; i % 2 === 1 ? bg = 'lightcyan' : null; item.style.backgroundColor = bg; // 把當前LI的背景顏色賦值給LI元素對象的自定義屬性 item.MyBg = bg; item.onmouseover = function () { // this是內置的關鍵詞：他存儲的就是當前操作誰就是誰 this.style.backgroundColor = 'lightcoral'; }; item.onmouseout = function () { // 此處需要知道之前LI的背景顏色:在后面的某一個操作中，我們需要知道之前的一些信息，此時我們基于自定義屬性方案（在最開始循環的時候，我們把當前LI的背景顏色基于自定義屬性的方式，賦值給LI元素對象（堆內存），后期需要的時候直接從自定義屬性中獲取到即可） this.style.backgroundColor = this.MyBg; }; } // ======================下面鼠標滑過效果是不行的 // 循環LI集合中的每一項，控制每一項的背景色和滑過需要處理的操作 for (var i = 0; i < itemList.length; i++) { // item:每一輪循環要操作的這個LI元素對象 // i:當前操作LI的索引 // i % 2 === 1:索引是奇數，代表當前LI是偶數行 // bg:存儲當前行的背景顏色 var item = itemList[i], bg = '#FFF'; i % 2 === 1 ? bg = 'lightcyan' : null; item.style.backgroundColor = bg; // 控制每個LI，鼠標滑過顯示高亮顏色，鼠標離開回歸原始顏色 item.onmouseover = function () { // this:當前操作的這個LI（執行主體） item.style.backgroundColor = 'lightcoral'; }; item.onmouseout = function () { item.style.backgroundColor = bg; }; } </script> </body> </html> ~~~ ![](https://img.kancloud.cn/95/8e/958ed492a88bb1951fe4be53190afe73_888x532.png) ![](https://img.kancloud.cn/76/24/762450d168353d9b16778bb998e35a44_944x474.png) ![](https://img.kancloud.cn/e5/1d/e51ddaa20e6f75b1941fb6f00d9c5170_1032x431.png)