20210525JS修改样式

最新推荐文章于 2023-11-18 15:14:30 发布
最新推荐文章于 2023-11-18 15:14:30 发布
阅读量491 收藏
点赞数
分类专栏： 基础知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35482765/article/details/117253939
版权

1.JS通过style修改内联样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #box1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            /*
            点击按钮以后修改box1的大小
            */
           //获取box1
           var box1 = document.getElementById("box1");
           //为按钮绑定单击响应函数
           var btn01 = document.getElementById("btn01");
           btn01.onclick = function(){
               //修改box1的宽度
               /*
               通过JS修改元素的样式：
                 语法：元素.style.样式名 = "样式值"
                 注意：如果CSS的样式名中含有-，
                 这种名称在JS中是不合法的，比如background-color，
                 需要将这种样式名修改成驼峰命名法，
                 去掉-，然后将-后的字母大写
                 border-top-width   borderTopWidth

                 我们通过style属性设置的样式都是内联样式，
                 而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示

                 但是如果在样式中写了!important,则此时样式会有最高的优先级，
                 即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，
                 所以尽量不要为样式添加！important
               */
                box1.style.width = "300px";
                box1.style.backgroundColor = "yellow"; //Uncaught SyntaxError: Invalid left-hand side in assignment

           };

           //点击按钮2以后，读取元素的样式
           var btn02 = document.getElementById("btn02");
           btn02.onclick = function(){
               //读取box1的样式
               /*
                语法：
                    元素.style.样式名
                    通过style属性设置和读取的都是内联样式
                    无法读取样式表中的样式 
               */
                alert(box1.style.width);

           };
        };
    </script>
</head>
<body>
    <button id="btn01">点我一下</button>
    <button id="btn02">点我一下2</button>
    <br/><br/>
    <div id="box1"></div>
</body>
</html>

2.读取元素的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css"> 
        #box1 {
            /* width: 100px; */
            height: 100px;
            background-color: yellow;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            //点击按钮读取box1的样式
            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function(){
                //读取box1的宽度
                //只能读到内联样式
                //alert(box1.style.width);

                /*
                获取元素的当显示的样式
                语法：
                  元素.currentStyle.样式名
                  它可以用来读取当前元素正在显示的样式
                  如果当前元素没有设置该样式，则获取默认值
                但是只有IE浏览器支持，其它浏览器都不支持
                */
               //alert(box1.currentStyle.width);

               /*
               在其它浏览器中可以使用
                    getComputedStyle()这个方法来获取元素当前的样式
                    这个方法是window的方法，可以直接使用
                需要两个参数
                    第一个：要获取样式的元素
                    第二个：可以传递一个伪元素，一般都传null
                该方法会返回一个对象，对象中封装了当前元素对应的样式
                可以通过对象.样式名来读取样式
                如果获取的样式没有设置，则会获取到真实的值，而不是默认值
                比如：没有设置width，它不会获取到auto,而是一个长度

                但是该方法不支持IE8及以下的浏览器

                通过currentStyle和getComputedStyle()读取到的样式都是只读的，
                不能修改，如果要修改必须通过style属性
               */
                //正常浏览器的方式
                //var obj = getComputedStyle(box1, null);
                //alert(obj.width);
                //IE8的方式
                //alert(box1.currentStyle.backgroundColor);
                alert(getStyle(box1, "width"));
                
            };
        };

        /*
        定义一个兼容所有浏览器的函数，用来获取指定元素的当前的样式
        参数：
            obj 要获取样式的元素
            name 要获取的样式名
        */
        function getStyle(obj, name){
            // 方法一：
            //if(getComputedStyle){  //变量在IE8中找不着就报错，依然无法获得属性
            // if(window.getComputedStyle){  //对象的属性找不着返回undefined,转换为false
            //     //正常浏览器，具有getComputedStyle方法
            //     return getComputedStyle(obj,null)[name];
            // }else{             
            // //IE8方式，没有getComputedStyle()方法
            //     return obj.currentStyle[name];
            // }

            //方法二：逆向思维，但是还是建议使用上面的方法，IE11既有 currentStyle也有getComputedStyle()
            // if(obj.currentStyle){
            //     return obj.currentStyle[name];
            // }else{
            //     return getComputedStyle(obj,null)[name];
            // }

            //简单写法
            return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
        }
    </script>
</head>
<body>
    <button id="btn01">点我一下</button>
    <div id="box1"  ></div>
</body>
</html>

3.滚动条练习

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #info {
            width: 300px;
            height: 500px;
            background-color: #bfa;
            overflow: auto;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            /*
            当垂直滚动条滚动到底时使表单项可用
            onscroll
            - 该事件会在元素的滚动条滚动时触发
            */
            //获取id为info的p元素
            var info = document.getElementById("info"); 
            //获取表单项
            var inputs = document.getElementsByTagName("input");
            //为info绑定一个滚动条滚动的事件
            info.onscroll = function(){
                //检查滚动条是否滚动到底
                if(info.scrollHeight - info.scrollTop === info.clientHeight){
                    //滚动条滚动到底使表单项可用
                    /*
                    disabled属性可以设置一个元素是否禁用,
                    如果设置为true, 则元素禁用
                    设置为false，则元素可用
                    */
                    inputs[0].disabled = false;  //disabled =false 表示不禁用
                    inputs[1].disabled = false;
                }
            };
        };
    </script>
</head>
<body>
    <h3>欢迎亲爱的用户注册</h3>
    <p id="info">
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    </p>
    <!-- 如果为表单项添加disabled="disabled" 则标单项将变成不可用的状态 -->
    我已仔细阅读协议，一定遵守<input type="checkbox" disabled="disabled">
    <input type="submit" value="注册" disabled="disabled">
</body>
</html>

4.div随鼠标移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            /*
            开启绝对定位
            */
            position:absolute;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            /*
            使div可以跟随鼠标移动
            */
            //获取box1
            var box1 = document.getElementById("box1");
            //绑定鼠标移动事件
            document.onmousemove = function(event){

                //解决兼容问题
                event = event || window.event;

                //获取滚动条滚动的距离
                /*
                 chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
                 2021chrome兼容了，也认为是html的了，不用 var scrollTop = document.documentElement.scrollTop|| window.pageYOffset || document.body.scrollTop
                 火狐等浏览器认为浏览器的滚动条是html的
                */
                var scrollTop = document.documentElement.scrollTop;

                //获取鼠标的坐标
                /*
                clientX和clientY
                用于获取鼠标在当前的可见窗口的坐标

                pageX和pageY可以获取鼠标相对于当前页面的坐标
                但是这两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
                */
                var left = event.clientX;
                var top = event.clientY;

                //设置div的偏移量,只对开启定位的元素起作用
                box1.style.left = left + "px";
                box1.style.top = top + scrollTop + "px";

            };
        };
    </script>
</head>
<body heigtht="height:100000px;width: 20000px;">
    <div id="box1"></div>
</body>
</html>

5.事件的冒泡

取消冒泡：
event = event || window.event;
event.cancelBubble = true;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #box1 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }

        #s1 {
            background-color: yellow;
        }
    </style>
    <script type="text/javascript">

        window.onload = function(){

            /*
            事件的冒泡（Bubble）
            - 所谓事件的冒泡指的就是事件向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
            - 在开发中大部分冒泡都是有用的，如果不希望事件冒泡可以通过事件对象来取消冒泡
            */

            //为s1绑定一个单击响应函数
            var s1 = document.getElementById("s1");
            s1.onclick = function(event){
                event = event || window.event;
                alert("我是span的单击响应函数");

                //取消冒泡
                //可以将事件对象的cancelBubble设置为true，即可取消冒泡
                event.cancelBubble = true;
            };

            //为box1绑定一个单击响应函数
            var box1 = document.getElementById("box1");
            box1.onclick = function(){
                event = event || window.event;
                alert("我是div的单击响应函数");
                event.cancelBubble = true;
            };

            //为body绑定一个单击响应函数
            document.body.onclick = function(){
                alert("我是body的单击响应函数");
            };
        };

    </script>
</head>
<body>
    <div id="box1">
        我是box1
        <span id="s1">我是span</span>
    </div>
</body>
</html>

6.事件的委派

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        window.onload = function(){
            var u1 = document.getElementById("u1");
            //点击按钮以后添加超链接
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function(){
                //创建一个li
                var li = document.createElement("li");
                li.innerHTML = "<a href='javascript:;'>新建的超链接一</a>";
                //将li添加到ul中
                u1.appendChild(li);
            };

            /*
            为每一个超链接都绑定单击响应函数
            这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦
            而且这些操作只能为已有的超哦链接设置事件，而新添加的超链接必须重新绑定
            */
            //获取所有的a
            var allA = document.getElementsByTagName("a");
            //遍历
            // for(var i=0; i<allA.length; i++){
            //     allA[i].onclick = function(){
            //         alert("我是a的单击响应函数");
            //     };
            // }
            /*
            我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
            我们可以尝试将其绑定给元素的共同的祖先元素

            事件的委派
            - 将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
              从而通过祖先元素的响应函数来处理事件。
            - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
            */
           //为u1绑定一个单击响应函数
            u1.onclick = function(event){
                event = event || window.event;
                /*
                target 
                - event中的target表示触发事件的对象
                */
               //如果触发事件的对象是我们期望的元素，则执行，否则不执行
                if(event.target.className == "link"){
                    alert("我是ul的单击响应函数");
                }
            };

        };
    </script>
</head>
<body>
    <button id="btn01">添加超链接</button>
    <ul id="u1" style="background-color: #bfa;">
        <li><p>我是p元素</p></li>
        <li><a href="javascript:;" class="link">超链接一</a></li>
        <li><a href="javascript:;" class="link">超链接二</a></li>
        <li><a href="javascript:;" class="link">超链接三</a></li>
    </ul>
</body>
</html>

7.事件的绑定. 涉及兼容

//大部分浏览器兼容的方式
obj.addEventListener(eventStr, callback, false );

//IE8及以下
obj.attachEvent(“on”+eventStr, callback);//这里是windows调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">

        window.onload = function(){
            /*
             点击按钮以后弹出一个内容
            */
           //获取按钮对象
           var btn01 = document.getElementById("btn01");

           /*
            使用对象.事件 = 函数 的形式绑定响应函数，
             它只能同时为一个元素的一个事件绑定一个响应函数
             不能绑定多个，如果绑定了多个，则后边会覆盖掉前面的
           */

           //为btn01绑定一个单击响应函数
          /*  btn01.onclick = function(){
               alert(1);
           }; */
           //为btn01绑定第二个响应函数
          /*  btn01.onclick = function(){
               alert(2);
           }; */

           /*
           第二种绑定事件的方法
           addEventListener()
           - 参数：
                1.事件的字符串，不要写 on
                2.回调函数，当事件触发时该函数会被调用
                3.是否在捕获阶段触发事件，需要一个布尔值，一般传false

            使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
            这样当事件被触发时，响应函数将会按照函数的绑定顺序执行。

            这个方法不支持IE8及以下的浏览器
            - 在IE8中可以使用attachEvent()来绑定事件
            - 参数：
                1.事件的字符串，要on
                2.回调函数
            - 这个方法也可以同时为一个事件绑定多个处理函数，
            不同的是它是后绑定先执行，执行顺序和addEventListener()相反
           */
           //btn01.addEventListener("click",function(){alert(1);}, false);

           //btn01.addEventListener("click",function(){alert(2);}, false);

           bind(btn01, "click", function(){alert(1);});
           bind(btn01, "click", function(){alert(2);});
           //定义一个函数，用来为指定元素绑定响应函数
           /*
           addEventListener()中的this,是绑定事件的对象
           attachEvent()中的this，是window
           需要统一两个方法中的this
           */
           /*
           参数：
                obj 要绑定事件的对象
                eventStr 事件的字符串(不要on)
                callback 回调函数
           */
           function bind(obj, eventStr, callback){
                if(obj.addEventListener){
                    //大部分浏览器兼容的方式
                    obj.addEventListener(eventStr, callback, false );
                }else{
                    /*
                    this是谁由调用方式决定
                    callback.call(obj)
                    */
                    //IE8及以下
                    //obj.attachEvent("on"+eventStr, callback);//这里是windows调用
                    obj.attachEvent("on"+eventStr, function(){
                        //在匿名函数中调用回调函数
                        callback.call(obj); //修改this指向
                    });

                }
           }
        };

    </script>
</head>
<body>
    <button id="btn01">点我一下</button>
</body>
</html>
是郭橙橙呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端学习笔记—使用JS修改样式】
LPC的博客
04-24 1万+
目录JS修改样式的8种方式1.直接设置style的属性2.直接设置属性3.设置style的属性4.使用setProperty5.改变class6.设置cssText7.引入css样式文件8.使用addRule、insertRule JS修改样式的8种方式 1.直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有’-'号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，就中括号的形式 element.style.height = '100px'; 2.直接设.
JS修改样式属性
Revin的博客
01-08 3593
JS修改样式属性
JS修改style样式
weixin_47449058的博客
10-25 6820
js动态创建样式
js修改样式属性的三种方式
最新发布
2301_79124729的博客
11-18 226
js修改样式方法
JS 样式操作学习总结。
weixin_30322405的博客
07-29 298
在我们编写网页的时候，样式表示我们常常需要相伴的内容，谁然很招人烦。恕我前端菜鸟对这东西很是无力啊。下面是我在代码浪潮中的虚席到的一些东西。 1、样式表内容修改方式。 2、当前元素样式内容获取。 3、document.styleSheets内容。 1.首先我们从最简单的开始，样式表修改。 　　我们在编写网页的时候通常需要对元素进行一些显示样式内容的修改，这是我们其实是有许多种方法的...
原生js更改css样式的两种方式
10-20
1. **通过`node.style.cssText`属性更改样式** 这种方法允许我们直接在JavaScript代码中设置元素的CSS样式。例如，假设我们有一个类名为`root`的`<div>`元素，我们可以获取这个元素并修改它的样式。以下是如何操作...
javascript 动态修改css样式方法汇总(四种方法)
10-23
为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的Css属性，如何动态修改css样式呢？面对这个问题，小编带领大家来解决javascript动态修改css样式，小伙伴们都快来学习吧
可以修改样式的js-xlsx
05-21
可以导出并修改excel样式的前端excel库，已同步社区最新版。...由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，遗憾的是无法修改导出表格的样式。
原生JS实现获取及修改CSS样式的方法
10-18
本文将详细讲解如何使用原生JS来获取和修改CSS样式，包括行内样式、内部样式以及外部样式，同时也会涉及浏览器兼容性问题。 一、行内样式获取 行内样式是直接在HTML元素的`style`属性中定义的样式。例如： ```html ...
arcgis for js 修改infowindow样式的方法
10-21
下面小编就为大家带来一篇arcgis for js 修改infowindow样式的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS修改元素的样式
乔的博客
06-09 2万+
<html> <head> <style> #a{ width:700px; height:300px; font-size:50px; color:red; background-color:grey; z-index:2; position:absolute; top:13...
JS 改变HTML样式
skysys的研究小屋
02-09 5080
语法 Object.style.property=new style; 注意:Object是获取的元素对象，如通过document.getElementById(“id”)获取的元素。 基本属性表（property) 注意:该表只是一小部分CSS样式属性，其它样式也可以通过该方法设置和修改。 例子: 改变 &lt;p&gt; 元素的样式，将颜色改为红色，字号改为20,背景颜色改为蓝： &lt...
JS设置样式
前端菜鸟
06-26 1万+
IE9以上，google,firefox支持 document.getElementById('alert_wrap').style.setProperty('position', 'fixed') document.getElementById('alert_wrap').style.setProperty('margin-left', -tanchuWidth / 2) document.g...
通过JS修改CSS样式
热门推荐
Lanly-Li的博客
08-03 2万+
通过JS修改CSS样式有两种方法： 修改某一属性的值 修改某一元素的class名，使其被别的样式修饰 修改某一属性的值 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title&g...
用JS改变html样式
张致豪
06-13 1万+
用JS改变HTML样式 在html中定义样式的方法有3种： 通过link标签链接外部样式 使用style标签定义嵌入式样式 使用标签style属性定义样式 用JS改变的HTML样式无非就是上面三种，改变样式只需要解决两个问题 找到要更改样式的元素 更改样式 更改link链接的外部样式 html> head> title>title> link rel="sty
用js改变css样式
weixin_44582939的博客
01-20 8775
用js改变css样式 （作者：张米，日期：2019年1月20日） 下面我们使用js改变css样式。格式是： document.getElementById(“id名”).style.属性=“属性值”; 首先，给要改变样式的标签一个id名。在这里插入图片描述： 然后，设置样式。 1、没有改变样式之前的代码 代码效果 2、改变样式的代码 代码效果 ...
JS修改css方法
05-30 7094
// 1 var obj = document.getElementById(“objA”); obj.style.backgroundColor= “black”; // 2 var obj = document.getElementById(“objB”); obj.style.cssText = “background-color:black; display:block;colo...
vue3js修改样式
09-02
要在Vue 3中修改样式，可以使用以下几种方式： 1. 使用内联样式：在Vue组件的模板中，可以通过`style`属性来设置内联样式。例如： ```vue , fontSize: '20px' }"> This is a red text with font size of 20px. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值