JS样式属性操作

最新推荐文章于 2024-06-02 21:27:33 发布

Var521

最新推荐文章于 2024-06-02 21:27:33 发布

阅读量230

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Var521/article/details/104542738

版权

element.style 行内样式操作

JS可以修改元素的大小、颜色、位置等样式

 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         div{
             width: 200px;
             height: 300px;
             background-color: aquamarine;
         }
     </style>  
     
 </head>
 <body>
     <div class="box">王也</div>

    <script>
        var div = document.querySelector('div');
        div.onclick = function(){
            this.style.backgroundColor = 'pink';
        }
        
        
    </script>
 </body>
 </html>

结果：
在这里插入图片描述

注意：
1.JS里面的样式采用驼峰命名法，如backgroundColor
2.JS修改style样式操作，产生的是行内样式，css权重较高，因此这里的width替换为js中修改的内容

Var521

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS样式属性操作

element.style 行内样式操作JS可以修改元素的大小、颜色、位置等样式 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
复制链接

扫一扫