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

注意
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?

推薦閱讀