原生JavaScript获取css样式

Posted 2020-08-03

基础知识：

访问属性：obj.attr 或者 obj[‘attr‘]

通过js访问style属性 :

document.getElementById("main").style.backgroundColor; 

通过js改变style属性:

document.getElementById("main").style.backgroundColor="blue"; 

 

 

使用 CSS 控制页面的四种方式，分别为行内样式(内联样式)、内嵌式、链接式、导入式。

行内样式(内联样式)即写在 html 标签中的 style 属性中控制元素样式，如下代码示例：

<div style="width:100px;height:100px;"></div>

内嵌样式即写在 style 标签中，如下代码示例：

<style type="text/css">
div{ width:100px; height:100px }
</style>

链接式即为用 link 标签引入css文件，如下代码示例：

<link href="/static/css/main.css?v=1" type="text/css" rel="stylesheet" />

导入式即为用 import 引入 CSS 文件，如下代码示例：

@import url("/static/css/main.css?v=1")

可以使用 style 属性获取 CSS 样式，但是 style 只能获取元素的内联样式。因此，要获取元素的完整的样式信息，必须使用 window 对象的 getComputedStyle 方法，此方法有2个参数，第一个参数为要获取计算样式的元素，第二个参数可以是null、空字符串、伪类(如:before,:after)，这两个参数 都是必需的。（为什么测试后不加这个参数也可？目前可以了？）在 IE8 以下浏览器中没有实现 getComputedStyle 方法，但可以使用 IE 中每个元素有自己的 currentStyle 属性来获取样式。获取元素样式的兼容代码如下：

<style type="text/css">
#eleid{
    font-size:14px;
}
</style>

<div id="eleid"></div>

<script>
var ele = document.getElementById("eleid");
var style = window.getComputedStyle ? 
    window.getComputedStyle(ele, "") : 
    ele.currentStyle;

var font_size = style.fontSize;　　//14px;
</script>

获取<link>和<style>标签写入的样式，通过 styleSheets 获取某个样式表。这种方法只能获取声明时候的样式，跟实际运算后的有差异，如下示例：

var obj = document.styleSheets[0];
if( obj.cssRules ) {
    // 非IE [object CSSRuleList]
    rule = obj.cssRules[0];  
} else {
    // IE [object CSSRuleList]
    rule = obj.rules[0];
}

网上流传的一些获取样式的方法收集如下：

var css = function (_obj,_name){
    var result;
        //转换成小写
        _name = _name.toLowerCase();
        //获取样式值
        if(_name && typeof value === ‘undefined‘){
            //如果该属性存在于style[]中 （操作获取内联样式表 inline style sheets）
            if(_obj.style && _obj.style[_name]){
                result = _obj.style[_name];
            }
            //操作嵌入样式表或外部样式表 embedded style sheets and linked style sheets
            else if(_obj.currentStyle){
                 // 否则 尝试IE的currentStyle
                 _name = _name.replace(/\-([a-z])([a-z]?)/ig,function(s,a,b){
                    return a.toUpperCase()+b.toLowerCase();
                });
                result = _obj.currentStyle[_name];
            }
            //或者W3C的方法 如果存在的话 Firefox,Opera,safari
            else if(document.defaultView && document.defaultView.getComputedStyle){
                //获取Style属性的值，如果存在
                var w3cStyle = document.defaultView.getComputedStyle(_obj, null);
                result = w3cStyle.getPropertyValue(_name);
            }
            if(result.indexOf(‘px‘)!=-1) result = result.replace(/(px)/i,‘‘);
            return result;
        }
    }

<script type="text/javascript">
function getStyle( elem, name )
{
    //如果该属性存在于style[]中，则它最近被设置过(且就是当前的)
    if (elem.style[name])
    {
        return elem.style[name];
    }
    //否则，尝试IE的方式
    else if (elem.currentStyle)
    {
        return elem.currentStyle[name];
    }
    //或者W3C的方法，如果存在的话
    else if (document.defaultView && document.defaultView.getComputedStyle)
    {
        //它使用传统的"text-Align"风格的规则书写方式，而不是"textAlign"
        name = name.replace(/([A-Z])/g,"-$1");
        name = name.toLowerCase();
        //获取style对象并取得属性的值(如果存在的话)
        var s = document.defaultView.getComputedStyle(elem,"");
        return s && s.getPropertyValue(name);
    //否则，就是在使用其它的浏览器
    }
    else
    {
        return null;
    }
}
</script>

不过对于css中的float属性，由于JavaScript将float作为保留字，所以不能将其用作属性名，因此有了替代者，在 IE中是”styleFloat”,而在FireFox、Safari、Opera和Chrome中则是”cssFloat”。所以基于兼容性的考虑可以 将样式操作改为如下形式：

//element:需要获取样式的目标元素;name:样式属性
function getStyle(element, name) {
    var computedStyle;
    try {
        computedStyle = document.defaultView.getComputedStyle(element, null);
    } catch (e) {
        computedStyle = element.currentStyle;
    }
    if (name != "float") {
        return computedStyle[name];
    } else {
        return computedStyle["cssFloat"] || computedStyle["styleFloat"];
    }
}
//element:需要设置样式的目标元素;name:样式属性;value:设置值
function setStyle(element, name, value) {
    if (name != "float") {
        element.style[name] = value;
    } else {
        element.style["cssFloat"] = value;
        element.style["styleFloat"] = value;
    }
}