当前位置：网站首页>Use classname to modify style properties

Use classname to modify style properties

2022-07-04 01:24:00 【How's Kakashi doing】

There are two ways to modify style attributes

The first one is ： Inline style operation ,element.style , It is recommended to use when there are few styles that need to be changed or when the function is simple

The second kind ： Class name style operation , element.className , When the styles that need to be modified are complex and many , Use this method

element.style

Inline style operation , It is recommended to use when there are few styles that need to be changed or when the function is simple , Directly in script Add... To the tag , Only one attribute style can be changed at a time , When there are many styles that need to be changed , This method is cumbersome .

 <style>
       div{
           width: 200px;
           height: 300px;
           background-color: rgb(253, 180, 180);
       }
    </style>
</head>
<body>
   <div></div>
   <script>
       var div1=document.querySelector('div');
       div1.onclick=function(){
           this.style.backgroundColor='#333'  //element.style  Mode change style 
       }
   </script>
</body>

element.className

When there are many attribute styles that need to be changed , This method is relatively simple , Add the style you want to show after changing directly in the way of class selector css Of style In the label , And then in script In the event element.className that will do , It should be noted that after the style changes , If there is no class name in the label , Then a class name will be added after the event is executed （ Just now, css Added in ）, If there was Class name , It's going to overwrite

<style>
       div{
           width: 200px;
           height: 300px;
           background-color: rgb(253, 180, 180);
       }

       .change{
        width: 200px;
           height: 300px;
           background-color: rgb(39, 89, 255);
       }
    </style>
</head>
<body>
   <div></div>
   <script>
       var div1=document.querySelector('div');
       div1.onclick=function(){
          this.className='change';  // There is no dot before the class name here 
       }
   </script>
</body>