ele.style
访问或设置行内样式
window.getComputedStyle()
//获取非行内样式 //标准浏览器获取非行内样式的方法 // alert(getComputedStyle(o_div,1).width); //IE浏览器获取非行内样式的方法 // alert(o_div.currentStyle.width); //兼容 // obj :指定的标签对象 // attribute : 属性 attr 样式属性 function getStyle(obj,attr){ return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,true)[attr]; // return window.getComputedStyle ? getComputedStyle(obj,1)[attr] : obj.currentStyle[attr]; }
操作元素类名
ele.className
ele.classList
- ele.classList : 获取元素的全部类名
- ele.classList.lentgh: 获取到元素类名的数量
- ele.classList.add(): 向元素添加一个或多个类名
- ele.classList.remove() : 可以删除元素的一个或多个类名
- ele.classList.item(index) : 可以获取到元素类名索引为index的类名
- ele.classList.toggle() : 可以为元素切换类名
- ele.classList.contains(x) : 查看元素是否存在类名为"x"的类
操作元素属性
原生属性操作
元素.属性 元素['属性'] 元素.getAttribute('属性名') 元素.setAttribute('属性名','属性值') 元素.removeAttribute('属性名')
自定义属性操作
- getAttribute
- setAttribute
- removeAttribute
元素.getAttribute('属性名') : 获取属性 元素.setAttribute('属性名','属性值') ： 设置属性 元素.removeAttribute('属性名') ： 删除属性
H5自定义属性的操作 ( data-* )
- ele.dataset : 读写自定义属性
<body> <div id="box" data-my-id="me"></div> <script> var o_div = document.getElementById('box'); console.log(o_div.dataset.myId); //'me' </script> </body>
操作元素内容
- innerHTML : 设置或获取当前节点内容的内容（超文本）（可以解析超文本的含义）
- innerText : 设置或获取当前节点内部的内容（纯文本）（不能解析超文本）
- value : 设置或获取表单中的内容
