JavaScript读取元素当前css样式——解决currentStyle不兼容问题

最新推荐文章于 2020-04-25 09:54:32 发布

LiLi_code

最新推荐文章于 2020-04-25 09:54:32 发布

阅读量1k

点赞数

分类专栏： Html 前端文章标签： javascript

本文链接：https://blog.csdn.net/LiLi_code/article/details/104915040

版权

本文讨论了JavaScript在获取元素CSS样式时遇到的兼容性问题，包括style只能获取内联样式，currentStyle是IE专属，而getComputedStyle仅支持IE9+。为了解决这些问题，提出了一个兼容性函数的实现。

摘要由CSDN通过智能技术生成

注：style它只能获取到内联样式中的属性值；currentStyle它由于兼容性不好，是IE专属的用来获取CSS属性，但是谷歌和火狐都不支持；getComputedStyle()方法，也不能完美兼容，只支持IE9+以上的浏览器

故，使用一个函数将其兼容性统一解决：

var CurrentStyle = function (element) {
    return element.currentStyle || document.defaultView.getComputedStyle(element, null);
};

完整代码可供参考如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>读取元素当前样式</title>
    <style>
        #box1 {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var CurrentStyle = function (element) {
                 return element.currentStyle ||

最低0.47元/天解锁文章

LiLi_code

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript读取元素当前css样式——解决currentStyle不兼容问题

注：style它只能获取到内联样式中的属性值；currentStyle它由于兼容性不好，是IE专属的用来获取CSS属性，但是谷歌和火狐都不支持；getComputedStyle()方法，也不能完美兼容，只支持IE9+以上的浏览器故，使用一个函数将其兼容性统一解决：var CurrentStyle = function (element) { return element.curr...
复制链接

扫一扫

专栏目录