利用JS修改style属性和添加元素类名（important)

最新推荐文章于 2024-03-17 21:57:30 发布

小白不会永远是小白

最新推荐文章于 2024-03-17 21:57:30 发布

阅读量4k

点赞数 1

分类专栏： Javascript

本文链接：https://blog.csdn.net/weixin_43826180/article/details/107853798

版权

Javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、添加style样式

　　A、当代码中没有style元素时，可以通过document.createElement("style");建立style，然后插入到doucment.head,最后就可以成功在js中添加style了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box1">

    </div>
    <script>
        var styleNode = document.createElement("style");
        styleNode.innerHTML=".box1{width:100px;height:100px;background:red}";
        document.head.appendChild(styleNode);                
    </script>
</body>
</html>

　　以下是效果：

　　B、当代码中已经存在style元素时

<!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>
        .box1{
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <script>
        var styleNode = document.createElement("style");
        styleNode.innerHTML=".box1{width:100px;background:red}";
        document.head.appendChild(styleNode);                
    </script>
</body>
</html>

　按原来的方法也是可以新加style，但是这样会不太好，因为一个html文档一般只存在一个style元素，createElement会新建一个style元素，

　效果如下：

　　建议采用如下方式添加样式

<!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>
        .box1{
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <script>
        var styleNode = document.querySelector("style");
        styleNode.innerHTML+=".box1{width:100px;background:red}";
        // document.head.appendChild(styleNode);                
    </script>
</body>
</html>

结果如下：

2、修改style样式

　　如果不需要新增样式，仅仅是修改已有的属性，那么可以采用以下的方法：

<!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>
        .box1{
            height: 200px;
            width: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box1">
    </div>
    <script>
        var box1=document.querySelector(".box1");
        box1.style.height="300px";            
    </script>
</body>
</html>

上述代码只是在原有的基础进行修改，不新增样式，这也是平时绝大多数使用的方式

3、添加元素class类名

　　有时候我们可以通过js添加或移除元素类名进而控制元素的样式变化

<!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>
        .box1{
            height: 200px;
            width: 200px;
            background-color: red;
        }
        .active{
           height: 300px;
           width: 300px;
        }
    </style>
</head>
<body>
    <div class="box1">
    </div>
    <script>
        var istrue=false;
        var box1=document.querySelector(".box1");
        box1.addEventListener('click',function(){
            istrue=!istrue;
            if(istrue){
                console.log(istrue);
                box1.classList.add("active");
            }
            else{
                console.log(istrue);
                box1.classList.remove("active");
            }
        })
    </script>
</body>
</html>

　点击box就可以实现样式变化

利用这个可以实现很多交换动画

小白不会永远是小白

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
利用JS修改style属性和添加元素类名（important)

1、添加style样式　　A、当代码中没有style元素时，可以通过document.createElement("style");建立style，然后插入到doucment.head,最后就可以成功在js中添加style了<!DOCTYPE html><html lang="en"><head> <meta charset="...
复制链接

扫一扫

专栏目录