笔记：Web前端教程61 dom获取当前样式

最新推荐文章于 2023-07-05 20:39:17 发布

百目清

最新推荐文章于 2023-07-05 20:39:17 发布

阅读量346

点赞数

分类专栏： web学习笔记

本文链接：https://blog.csdn.net/qq_39503991/article/details/108450082

版权

web学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

笔记：Web前端教程61 dom获取当前样式

练习笔记：

<!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:red;
            width:300px
        }
       
    </style>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            // alert(oDiv.style.width);
            // alert(oDiv.style.height);
            // alert(oDiv.style.backgroundColor);
            
            /*
                上述方法只能找到行间css样式

                获取当前有效样式(优先级高的样式
                )
                getComputedStyle(元素节点)【获取当前样式类型】

            */
            alert(getComputedStyle(oDiv)["width"]);
        }
       //获取当前样式的兼容数
       function getStyle(elem,attr){
           return elem.currentStyle ? elem.currentStyle[attr]:getComputedStyle[attr];
       }
    </script>
</head>
<body>
    <div id="div1" style="height:300px"></div>
</body>
</html>

百目清

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
笔记：Web前端教程61 dom获取当前样式

笔记：Web前端教程61 dom获取当前样式练习笔记：<!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&g
复制链接

扫一扫

专栏目录