js中获取css样式的两种方式

系统管理员 2021-03-27 12:05 660阅读 0赞

**1. 对象.style.样式名 **

弊端就是只能获取行内样式

**2.window.getComputedStyle(对象，null);**

最好用第二种方式

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <style type="text/css">
            #box{
                width: 40px;
                height: 40px;
                background-color: red;
            }
            
        </style>
        <body>
            <button id="btn" >切换</button>
            <div id="box" style="border: 1px solid #0f0;"></div>
        </body>
            <script>
                var box = document.getElementById("box");
                var btn = document.getElementById("btn");
                var sty = getComputedStyle(box,null);
                btn.onclick = function(){
                    console.log(box.style.background);
                    if(sty.backgroundColor == "rgb(255, 0, 0)"){
                        box.style.backgroundColor = "blue";
                    }else{
                        box.style.backgroundColor = "red";
                    }
                }
            </script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，660人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue组件中引入CSS样式的三种方式

直接上菜： <template> <div class='test'> <img class='test_img' :src="requi

电玩女神/ 2023年09月30日 17:23/ 0 赞/ 21 阅读

相关 js中获取元素对象的四种方式

通过id获取 > 通过元素的ID值获取到某个元素对象返回：单个对象，因为id是唯一的格式 document.getElementById("id名称")

朱雀/ 2023年02月11日 04:59/ 0 赞/ 135 阅读

相关 JS_js设置css样式的几种方式

1.直接设置style属性 element.style.height = '100px'; 2.直接设置属性 element.setAttribute('

偏执的太偏执、/ 2022年11月07日 13:19/ 0 赞/ 213 阅读

相关 JS_js获取元素样式style属性值，js获取元素css样式，getComputedStyle

getComputedStyle(“元素”, “伪类”) <div id="caseroul" style="width: 500px;"></div> 获取单个

小灰灰/ 2022年10月15日 08:57/ 0 赞/ 265 阅读

相关 HTML引入css样式的三种方式，css选择器的三种样式

文章目录前言一. css样式的三种方式第一种：内联定义方式第二种：样式块

青旅半醒/ 2022年10月05日 00:53/ 0 赞/ 258 阅读

相关 JS获取dom的CSS样式

获取样式 //获取样式属性值 function getStyle(obj, attr) { if(obj.currentStyle) {

偏执的太偏执、/ 2022年05月22日 08:58/ 0 赞/ 404 阅读

相关 Node.js环境中执行js的两种方式

1.在REPL环境中 (1)：首先打开cmd（window + R 输入cmd） ![在这里插入图片描述][70] （2)：输入node回车（会出现下面的样子）

心已赠人/ 2022年05月10日 13:40/ 0 赞/ 392 阅读

相关 JS获取CSS样式的三种方式

JS获取CSS样式的三种方式第一种获取非行间的样式: 使用`getComputedStyle`与`currentStyle`属性获取样式这里第一个参数值获取那个选

分手后的思念是犯贱/ 2022年04月22日 06:46/ 0 赞/ 584 阅读

相关 js修改css样式的几种方法

参考：[https://www.cnblogs.com/LiuWeiLong/p/6058059.html][https_www.cnblogs.com_LiuWeiLong_

青旅半醒/ 2022年04月22日 04:28/ 0 赞/ 272 阅读

相关 js中获取css样式的两种方式

1. 对象.style.样式名弊端就是只能获取行内样式 2.window.getComputedStyle(对象，null); 最好用第二种方式 <!DOCTY...

系统管理员/ 2021年03月27日 12:05/ 0 赞/ 661 阅读