JavaScript实例详解之HTML元素操作( 二 ) _生活百科

注意
innerText属性在使用时可能会出现浏览器兼容的问题。因此，推荐在
开发时尽可能的使用innerHTML获取或设置元素的文本内容。同时， innerHTML属性和document.write()方法在设置内容时有一定的区别，前者作用于指定的元素，后者则是重构整个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元素的相关属性，提供了操作的属性和方法。

文章插图

利用attributes属性可以获取一个HTML元素的所有属性，以及所有属性的个数length 。
举个例子

文章插图

代码实现
<!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 。

文章插图

文章插图

注意
CSS中的float样式与JavaScript的保留字冲突，在解决方案上不同的浏览器
存在分歧。例如IE9——11、Chrome、FireFox可以使用“float”和“cssFloat” ， Safari浏览器使用“float” ， IE6~8则使用“styleFloat” 。
问题：一个元素的类选择器可以有多个，在开发中如何对选择器列表进行操作？
原来的解决方案：利用元素对象的className属性获取，获取的结果是字符型，然后再根据实际情况对字符串进行处理。
HTML5提供的办法：新增的classList（只读）元素的类选择器列表。
举例：若一个p元素的class值为“box header navlist title” ，如何删除header？