解析原生JS getComputedStyle


Posted in Javascript onMay 25, 2021

getComputedStyle 与getPropertyValue

getComputedStyle 为何物呢,DOM 中 getComputedStyle 方法可用来获取元素中所有可用的css属性列表,以数组形式返回,并且是只读的。IE678 中则用 currentStyle 代替 。

假设我们页面上存在一个 id 为 id 的元素,那么使用getComputedStyle 获取元素样式就如下图所示:

解析原生JS getComputedStyle

尝试一下之后可以看到,window.getComputedStyle 获取的是所有的样式,如果我们只是要获取单一样式,该怎么做呢。这个时候就要介绍另一个方法 --getPropertyValue。

用法也很简单:

// 语法:
// 使用 getPropertyValue 来指定获取的属性
window.getComputedStyle("元素", "伪类").getPropertyValue(style);

IE 下的 currentStyle与getAttribute

说完常规浏览器,再来谈谈老朋友 IE ,与getComputedStyle 对应,在 IE 中有自己特有的 currentStyle属性,与 getPropertyValue 对应,IE 中使用getAttribute 。

和 getComputedStyle 方法不同的是,currentStyle 要获得属性名的话必须采用驼峰式的写法。也就是如果我需要获取 font-size 属性,那么传入的参数应该是 fontSize。因此在IE 中要获得单个属性的值,就必须将属性名转为驼峰形式。

// IE 下语法:
// IE 下将 CSS 命名转换为驼峰表示法
// font-size --> fontSize
// 利用正则处理一下就可以了
function camelize(attr) {
    // /\-(\w)/g 正则内的 (\w) 是一个捕获,捕获的内容对应后面 function 的 letter
    // 意思是将 匹配到的 -x 结构的 x 转换为大写的 X (x 这里代表任意字母)
    return attr.replace(/\-(\w)/g, function(all, letter) {
        return letter.toUpperCase();
    });
}
// 使用 currentStyle.getAttribute 获取元素 element 的 style 属性样式
element.currentStyle.getAttribute(camelize(style));

style 与getComputedStyle

必须要提出的是,我们使用element.style 也可以获取元素的CSS样式声明对象,但是其与getComputedStyle方法还是有一些差异的。

首先,element.style 是可读可写的,而getComputedStyle 为只读。

其次,element.style 只可以获取 style 样式上的属性值,而无法得到所有的 CSS 样式值,什么意思呢?回顾一下 CSS 基础,CSS 样式表的表现有三种方式,

1.内嵌样式(inline Style) :是写在 HTML 标签里面的,内嵌样式只对该标签有效。

2.内部样式(internal Style Sheet):是写在 HTML 的 <style> 标签里面的,内部样式只对所在的网页有效。

3.外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以 .CSS为后缀的 CSS 文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个 CSS 文件。

而element.style 只能获取被这些样式表定义了的样式,而 getComputedStyle 能获取到所有样式的值(在不同浏览器结果不一样,chrome 中是 264,在 Firefox 中是238),不管是否定义在样式表中,譬如:

<style>
#id{
    width : 100px;
    float:left;
}
</style>
 
var elem = document.getElementById('id');
 
elem.style.length // 2
window.getComputedStyle(elem, null).length // 264

getComputedStyle 与defaultView

window.getComputedStyle 还有另一种写法,就是 document.defaultView.getComputedStyle 。

两者的用法完全一样,在 jQuery v1.10.2 中,使用的就是window.getComputedStyle 。如下

解析原生JS getComputedStyle

也有特例,查看stackoverflow,上面提及到在Firefox 3.6 ,不使用document.defaultView.getComputedStyle 会出错。不过毕竟 FF3.6 已经随历史远去,现在可以放心的使用window.getComputedStyle。

用一张图总结一下:

解析原生JS getComputedStyle

原生JS实现CSS样式的get与set

说了这么多,接下来将用原生 JS 实现一个小组件,实现 CSS 的 get 与 set,兼容所有浏览器。

getStyle(elem, style)

对于 CSS 的 set ,对于支持window.getComputedStyle 的浏览器而言十分简单,只需要直接调用。

getStyle: function(elem, style) {
    // 主流浏览器
    if (win.getComputedStyle) {
        return win.getComputedStyle(elem, null).getPropertyValue(style);
    }
}

反之,如果是 IE 浏览器,则有一些坑。

opacity 透明度的设定

在早期的 IE 中要设置透明度的话,有两个方法:

1.alpha(opacity=0.5)

2.filter:progid:DXImageTransform.Microsoft.gradient( GradientType= 0 , startColorstr = ‘#ccccc',endColorstr = ‘#ddddd' );

因此在 IE 环境下,我们需要针对透明度做一些处理。先写一个 IE 下获取透明度的方法:

// IE 下获取透明度   
function getIEOpacity(elem) {
    var filter = null;
 
    // 早期的 IE 中要设置透明度有两个方法:
    // 1、alpha(opacity=0)
    // 2、filter:progid:DXImageTransform.Microsoft.gradient( GradientType= 0 , startColorstr = ‘#ccccc', endColorstr = ‘#ddddd' );
    // 利用正则匹配
    filter = elem.style.filter.match(/progid:DXImageTransform.Microsoft.Alpha\(.?opacity=(.*).?\)/i) || elem.style.filter.match(/alpha\(opacity=(.*)\)/i);
 
    if (filter) {
        var value = parseFloat(filter);
        if (!isNaN(value)) {
            // 转化为标准结果
            return value ? value / 100 : 0;
        }
    }
    // 透明度的值默认返回 1
    return 1;

float 样式的获取

float 属性是比较重要的一个属性,但是由于 float 是ECMAScript的一个保留字。

所以在各浏览器中都会有代替的写法,比如说在标准浏览器中为 cssFloat,而在 IE678 中为 styleFloat 。经测试,在标准浏览器中直接使用getPropertyValue("float") 也可以获取到 float 的值。而 IE678 则不行,所以针对 float ,也需要一个 HACK。

width | height 样式的获取

然后是元素的高宽,对于一个没有设定高宽的元素而言,在 IE678 下使用getPropertyValue("width|height") 得到的是 auto 。而标准浏览器会直接返回它的 px 值,当然我们希望在 IE 下也返回 px 值。

这里的 HACK 方法是使用 element.getBoundingClientRect() 方法。

element.getBoundingClientRect() --可以获得元素四个点相对于文档视图左上角的值 top、left、bottom、right ,通过计算就可以容易地获得准确的元素大小。

获取样式的驼峰表示法

上文已经提及了,在IE下使用currentStyle 要获得属性名的话必须采用驼峰式的写法。

OK,需要 HACK 的点已经提完了。那么在 IE 下,获取样式的写法:

getStyle: function(elem, style) {
    // 主流浏览器
    if (win.getComputedStyle) {
        ...
    // 不支持 getComputedStyle
    } else {
        // IE 下获取透明度
        if (style == "opacity") {
            getIEOpacity(elem);
        // IE687 下获取浮动使用 styleFloat
        } else if (style == "float") {
            return elem.currentStyle.getAttribute("styleFloat");
                // 取高宽使用 getBoundingClientRect
        } else if ((style == "width" || style == "height") && (elem.currentStyle[style] == "auto")) {
            var clientRect = elem.getBoundingClientRect();
 
            return (style == "width" ? clientRect.right - clientRect.left : clientRect.bottom - clientRect.top) + "px";
        }
        // 其他样式,无需特殊处理
        return elem.currentStyle.getAttribute(camelize(style));
    }
}

setStyle(elem, style, value)

说完 get ,再说说 setStyle ,相较于getStyle ,setStyle 则便捷很多,因为不管是标准浏览器还是 IE ,都可以使用element.style.cssText 对元素进行样式的设置。

cssText -- 一种设置 CSS 样式的方法,但是它是一个销毁原样式并重建的过程,这种销毁和重建,会增加浏览器的开销。而且在 IE 中,如果cssText(假如不为空),最后一个分号会被删掉,所以我们需要在其中添加的属性前加上一个 ”;” 。

只是在 IE 下的 opacity 需要额外的进行处理。明了易懂,直接贴代码:

// 设置样式
setStyle: function(elem, style, value) {
    // 如果是设置 opacity ,需要特殊处理
    if (style == "opacity") {
        //IE7 bug:filter 滤镜要求 hasLayout=true 方可执行(否则没有效果)
        if (!elem.currentStyle || !elem.currentStyle.hasLayout) {
            // 设置 hasLayout=true 的一种方法
            elem.style.zoom = 1;
        }
        // IE678 设置透明度叫 filter ,不是 opacity
        style = "filter";
 
        // !!转换为 boolean 类型进行判断
        if (!!window.XDomainRequest) {
            value = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=" + value * 100 + ")";
        } else {
            value = "alpha(opacity=" + value * 100 + ")"
        }
    }
    // 通用方法
    elem.style.cssText += ';' + (style + ":" + value);
}

到这里,原生 JS 实现的 getStyle 与setStyle 就实现了。可以看到,一个简单接口的背后,都是有涉及了很多方面东西。虽然浏览器兼容性是一个坑,但是爬坑的过程却是我们沉淀自己的最好时机。

jQuery 这样的框架可以帮助我们走的更快,但是毫无疑问,去弄清底层实现,掌握原生 JS 的写法,可以让我们走得更远。

以上就是解析原生JS getComputedStyle的详细内容,更多关于原生JS getComputedStyle的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
80行代码写一个Webpack插件并发布到npm
Ajax请求超时与网络异常处理图文详解
May 23 #Javascript
vue-element-admin项目导入和导出的实现
May 21 #Vue.js
vue2实现provide inject传递响应式
May 21 #Vue.js
JS + HTML 罗盘式时钟的实现
JavaScript canvas实现流星特效
May 20 #Javascript
vue使用节流函数的踩坑实例指南
You might like
Protoss热键控制
2020/03/14 星际争霸
PHP 作用域解析运算符(::)
2010/07/27 PHP
组合算法的PHP解答方法
2012/02/04 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
php实现的简单检验登陆类
2015/06/18 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
分享10段PHP常用代码
2015/11/11 PHP
jquery实用代码片段集合
2010/08/12 Javascript
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
python实现拼接图片
2020/03/23 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
我爱我的祖国演讲稿
2014/05/04 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书