JS样式操作技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/a520songhai/article/details/80933054

js里

在标签里写style
<div id="round" style="width:400px; height:300px;">
一、可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式
如： <script type="text/javascript">
     window.onload=function(){ 
         var elm = document.getElementById('mytest');
          elm.style.color = 'red';   
     }
     </script>
二、通过Element对象的getAttribute()、setAttribute()、removeAttribute()直接读写style属性
 如：elm.setAttribute('style','color:red;line-height:30px');
三、通过CSSStyleDeclaration对象的cssText属性和setProperty()、removeProperty等方法

elm.style.cssText ='color:red;line-height:30px';
elm.style.removeProperty('color');
elm.style.setProperty('color', 'green', 'important');
elm.style.cssText = ''; //快速清空该规则的所有声明
<style type="text/css"> 
div{ 
 width:200px; 
 height:200px; 
} 
</style> 
<script type="text/javascript">
     window.onload=function(){   document.getElementById("mytest").style.backgroundColor="#639" 
     }
     </script>
</head> 
<body> 
<div id="mytest"></div> 
</body><script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p:first").addClass("intro");
  });
});
</script>
<style type="text/css">
.intro
{
font-size:120%;
color:red;
}
</style>

css 的几种写法