操作元素之样式属性操作

最新推荐文章于 2024-01-27 12:22:35 发布

只通宵不熬夜

最新推荐文章于 2024-01-27 12:22:35 发布

阅读量315

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript css

本文链接：https://blog.youkuaiyun.com/weixin_67110633/article/details/128849987

一.我们可以通过JS修改元素的大小，颜色，位置等样式

1.element.style 行内样式操作

2.element.ClassName 类名样式操作

案例如下：下面有一个div，颜色为红色，当我点击这个div，颜色变为粉色，并且改变他的宽度

代码如下：


<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>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        //1.获取元素
        let div=document.querySelector('div');
        //2.注册事件，处理程序
        div.onclick=function(){
            div.style. backgroundColor='pink';
            div.style.width='500px';
        }
    </script>
</body>
</html>

注：1.JS里的样式采取驼峰命名法

2.JS修改style样式操作，产生的是行内样式，css权重比较高

二.使用ClassName修改样式属性

案例如下：这有一个div，改变div的背景颜色，并且改变div里文字大小颜色，div盒子大小与位置，

这样写起来，代码就非常啰嗦。

代码如下：


<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>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .change{
            background-color: purple;
            color: #fff;
            font-size: 30px;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="first">文本</div>
    <script>
        //1.使用element.style获得修改元素样式，如果样式比较多或者功能简单的情况下使用
        let div=document.querySelector('div');
        div.onclick=function(){
            //当前元素的类名改为了change
        //2.我们可以通过修改元素的ClassName来更改元素的样式，适合于样式较多或者功能复杂的情况
             div.className='change';
             //多类名选择器
             div.className='first change';
        }
    </script>
</body>
</html>

注：1.如果样式修改较多，可以采取类名方式更改元素样式

2.class因为是个保留字，因此使用ClassName来操作元素类名属性

3.ClassName会直接更改元素的类名，会覆盖原来的类名

4.如果想保留原来的类名，可以使用多类名选择器

总结：样式修改比较少，功能简单，可以直接使用元素的style样式属性来修改就可以。样式修改比较多，功能复杂，就可以使用类名来修改，使用类修改，首先要定义一个类，在css里把想要的样式都写好，再把类加在元素上就好了。