js怎么改变css样式

JS如何改变CSS样式？

在前端开发中，JavaScript经常用来操作CSS样式。下面将介绍一些JS操作CSS样式的方法。

1.通过style属性修改元素样式

可以直接通过元素的style属性来修改样式。

      // 获取元素
      var box=document.getElementById('box');
      // 修改样式
      box.style.width='100px';
      box.style.height='100px';
      box.style.backgroundColor='red';
    

2.通过className修改元素样式

可以通过修改元素的className属性来改变CSS样式。

      // 获取元素
      var box=document.getElementById('box');
      // 修改样式
      box.className='box red';
    

3.通过classList修改元素样式

通过classList对象可以方便地修改元素的class。

      // 获取元素
      var box=document.getElementById('box');
      // 添加class
      box.classList.add('red');
      // 移除class
      box.classList.remove('red');
      // 切换class
      box.classList.toggle('red');
    

4.通过setAttribute修改元素样式

可以通过setAttribute方法来动态设置元素的style属性。

      // 获取元素
      var box=document.getElementById('box');
      // 设置样式
      box.setAttribute('style', 'width: 100px; height: 100px; background-color: red;');
    

总结

JS操作CSS样式的方式有很多种，可以根据具体情况选择不同的方法。