原生JavaScript获取css样式

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生JavaScript获取css样式相关的知识,希望对你有一定的参考价值。

基础知识:

访问属性: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;
    }
}

 


以上是关于原生JavaScript获取css样式的主要内容,如果未能解决你的问题,请参考以下文章

使用原生javascript如何读写css样式?

原生javascript 获得css样式有几种方法?

原生JS获取及设置CSS样式-1.行内样式

原生JS获取HTML样式并修改

用JavaScript修改CSS属性的代码

原生JavaScript(JS)修改添加CSS样式表 (更好的性能)