JS获取当前有效样式

最新推荐文章于 2022-04-09 20:59:51 发布

东方求败、

最新推荐文章于 2022-04-09 20:59:51 发布

阅读量164

点赞数

分类专栏： javascript复习之路 # javascript基础文章标签： javascript html css

本文链接：https://blog.csdn.net/wang_swa99er/article/details/119935267

版权

javascript复习之路同时被 2 个专栏收录

87 篇文章 0 订阅

订阅专栏

javascript基础

77 篇文章 1 订阅

订阅专栏

JS获取当前有效样式

方法一
【注】通过这种方式，只能找到行间的css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{background-color: blue;}
        .box{height: 300px;}
    </style>
    <script>
         window.onload = function(){
             var oDiv = document.getElementById("div1");
             var oDiv2 = document.getElementById ("div2");
			 alert(oDiv.style.backgroundColor);
			 alert(oDiv2.style.backgroundColor);
         }
    </script>
</head>
<body>
    <div id = 'div1' style = 'width: 200px; background-color: red;' class = 'box'></div>
    <div id = "div2"></div>
</body>
</html>

运行结果：
在这里插入图片描述

方法二

获取当前的有效样式
系统提供了两个方法(不同的浏览器)；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{background-color: blue;}
        .box{height: 300px;}
    </style>
    <script>
         window.onload = function(){
             var oDiv = document.getElementById("div1");
			 alert(oDiv2.style.backgroundColor);
             //alert(oDiv.currentStyle['height']);//IE
             //alert(getComputedStyle(oDiv)["height"]);//火狐，谷歌
			 
             alert(getStyle(oDiv,"background-color"));
         }
         //跨浏览器的兼容
         function getStyle(node,cssStyle){
             return node.currentStyle ? node.currentStyle[cssStyle] : getComputedStyle(node)[cssStyle];
         }
    </script>
</head>
<body>
    <div id = 'div1' style = 'width: 200px; background-color: red;' class = 'box'></div>
</body>
</html>

运行结果：
在这里插入图片描述

东方求败、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS获取当前有效样式

JS获取当前有效样式方法一【注】通过这种方式，只能找到行间的css样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &l
复制链接

扫一扫