js操作元素的样式

bingmo_

已于 2022-02-23 17:00:23 修改

阅读量611

点赞数

分类专栏：前端文章标签： javascript 前端 html

于 2019-10-10 21:17:26 首次发布

本文链接：https://blog.csdn.net/bingmo_/article/details/102491070

版权

前端专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<html>
   <head>
      <title>js操作元素的样式</title>
      <meta charset="UTF-8"/>
      <!--声明css-->
      <style type="text/css">
         #showdiv{
            width: 200px;
            height: 200px;
            border: solid 1px;
         }
         
         .common{
            width: 200px;
            height: 200px;
            border: solid 1px;
         }
         
         .common2{
            width: 200px;
            height: 200px;
            border: solid 1px;
            background-color: aqua;
         }
      </style>
      <!--
         js操作元素样式：
            获取元素对象
               通过style属性
                  元素对象名.style.样式名="样式值"//添加或者修改
                  元素对象名.style.样式名=""//删除样式
                  注意:
                     以上操作，操作的是HTML的style属性声明中的样式。而不是其他css代码域中的样式。
               通过className
                  元素对象名.className="新的值"//添加类选择器样式或者修改类选择器样式
                  元素对象名.className=""//删除类样式。
      -->
      <!--声明js代码域-->
      <script type="text/javascript">
         //js操作元素样式
            //js给元素操作样式---style
               function testOperCss(){
                  //获取元素对象
                     var showdiv=document.getElementById("showdiv");
                  //添加元素样式
                     showdiv.style.backgroundColor="#FFA500";
                  //js修改元素样式
                     showdiv.style.border="solid 2px red";
                  //js删除样式
                     showdiv.style.border="";
               }
            //js操作样式--className             
               function testOperCss2(){
                  //获取元素对象
                     var div01=document.getElementById("div01");
                  //获取
                     alert(div01.className);
                  //添加或者修改
                     div01.className="common2";
                  //删除
                     div01.className="";
                                    
               }  
      </script>
   </head>
   <body>
      <h3>js操作元素的样式</h3>
      <input type="button" name="" id="" value="测试操作元素样式--style" οnclick="testOperCss()" />
      <input type="button" name="" id="" value="测试操作元素样式--className" οnclick="testOperCss2()" />
      <hr />
      <div id="showdiv" style="border: solid 2px blue;">
         
      </div>
      <div id="div01" class="common">
         
      </div>
   </body>
</html>

bingmo_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js操作元素的样式

<html> <head> <title>js操作元素的样式</title> <meta charset="UTF-8"/>  <style type="text/css"> #showdiv{ ...
复制链接

扫一扫