1. 首頁 > 生活百科 > >

JavaScript實例詳解之HTML元素操作( 二 )

小知識it知識

注意
innerText屬性在使用時可能會出現瀏覽器兼容的問題 。 因此 ， 推薦在
開發時盡可能的使用innerHTML獲取或設置元素的文本內容 。 同時 ， innerHTML屬性和document.write()方法在設置內容時有一定的區別 ， 前者作用于指定的元素 ， 后者則是重構整個HTML文檔頁面 。 因此 ， 讀者在開發中要根據實際的需要選擇合適的實現方式
【案例】改變盒子大小
JavaScript實例詳解之HTML元素操作

文章插圖

代碼實現思路：
① 編寫HTML ， 設置p的大小 。
② 根據用戶的點擊次數完成盒子大小的改變 。
③ 單擊的次數為奇數時 ， 盒子都變大 ， 單擊次數為偶數時 ， 盒子都變小 。
代碼實現
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .box{width:50px;height:50px;background:#eee;margin:0 auto;} </style> </head> <body> <p id="box" class="box"></p> <script> var box = document.getElementById('box'); var i = 0; // 保存用戶單擊盒子的次數 box.onclick = function() { // 處理盒子的單擊事件 ++i; if (i % 2) { // 單擊次數為奇數 ， 變大 this.style.width = '200px'; this.style.height = '200px'; this.innerHTML = '大'; } else { // 單擊次數為偶數 ， 變小 this.style.width = '50px'; this.style.height = '50px'; this.innerHTML = '小'; } }; </script> </body> </html>
三、元素屬性
在DOM中 ， 為了方便JavaScript獲取、修改和遍歷指定HTML元素的相關屬性 ， 提供了操作的屬性和方法 。
JavaScript實例詳解之HTML元素操作

文章插圖

利用attributes屬性可以獲取一個HTML元素的所有屬性 ， 以及所有屬性的個數length 。
舉個例子
JavaScript實例詳解之HTML元素操作

文章插圖

代碼實現
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素屬性操作</title> <style> .gray{background: #CCC;} #thick{font-weight: bolder;} </style> </head> <body> <p>test word.</p> <script> // 獲取p元素 var ele = document.getElementsByTagName('p')[0]; // ① 輸出當前ele的屬性個數 console.log('未操作前屬性個數：' + ele.attributes.length); // ② 為ele添加屬性 ， 并查看屬性個數 ele.setAttribute('align', 'center'); ele.setAttribute('title', '測試文字'); ele.setAttribute('class', 'gray'); ele.setAttribute('id', 'thick'); ele.setAttribute('style', 'font-size:24px;border:1px solid green;'); console.log('添加屬性后的屬性個數：' + ele.attributes.length); // ③ 獲取ele的style屬性值 console.log('獲取style屬性值：' + ele.getAttribute('style')); // ④ 刪除ele的style屬性 ， 并查看剩余屬性情況 ele.removeAttribute('style'); console.log('查看所有屬性：'); for (var i = 0; i < ele.attributes.length; ++i) { console.log(ele.attributes[i]); } </script> </body> </html>
四、元素樣式
回顧：通過元素屬性的操作修改樣式 。
元素樣式語法：style.屬性名稱 。
要求：需要去掉CSS樣式名里的中橫線“-” ， 并將第二個英文首字母大寫 。
舉例：設置背景顏色的background-color ， 在style屬性操作中 ， 需要修改為backgroundColor 。
JavaScript實例詳解之HTML元素操作

文章插圖

JavaScript實例詳解之HTML元素操作

文章插圖

注意
CSS中的float樣式與JavaScript的保留字沖突 ， 在解決方案上不同的瀏覽器
存在分歧 。 例如IE9——11、Chrome、FireFox可以使用“float”和“cssFloat” ， Safari瀏覽器使用“float” ， IE6~8則使用“styleFloat” 。
問題：一個元素的類選擇器可以有多個 ， 在開發中如何對選擇器列表進行操作？
原來的解決方案：利用元素對象的className屬性獲取 ， 獲取的結果是字符型 ， 然后再根據實際情況對字符串進行處理 。
HTML5提供的辦法：新增的classList（只讀）元素的類選擇器列表 。
舉例：若一個p元素的class值為“box header navlist title” ， 如何刪除header？

推薦閱讀