JavaScript获取任一元素的任一属性值

最新推荐文章于 2022-05-14 18:11:59 发布

sleepwalker_1992

最新推荐文章于 2022-05-14 18:11:59 发布

阅读量222

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/sleepwalker_1992/article/details/80803692

版权

JavaScript 专栏收录该内容

57 篇文章 2 订阅

订阅专栏

style:

各大浏览器都兼容,能设置样式和获取样式,但是该方法只能获取到行内样式,获取不了外部的样式。如果写了行内没有的样式,返回的是空值.

用法:

获取元素的属性值：element.style.attr

设置元素的值：element.style.attr="值";

currentStyle:

不能设置属性,只能获取属性值，该属性只兼容IE,不兼容火狐和谷歌

用法:

element.currentStyle["attr"]或者element.currentStyle.attr

getComputedStyle:

不能设置属性,只能获取属性值，该属性兼容火狐谷歌,不兼容IE

用法:

window.getComputedStyle(ele,null)[attr]获取是window.getComputedStyle(ele,null).attr

封装一个函数，可以兼容各个浏览器，获取任一元素的任一属性值：

//获得任一元素的任一属性的值
function getStyle(element,attr){
    return window.getComputedStyle ?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}

用法例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: #8bff56;
            left: 100px;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    //获得任一元素的任一属性的值
    function getStyle(element,attr){
        return window.getComputedStyle ?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
    }
    var width=getStyle(document.getElementById("box"),"width");
    console.log(width);
</script>
</body>
</html>