操作元素样式-阿里云开发者社区

操作元素样式

2023-09-27 40

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 操作元素样式

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>