js里面怎么写css样式？

在网页开发中，我们会用js脚本来处理前端逻辑，用css来美化前端页面。那么你知道如何在js里写css吗？下面我们来看一下如何在介绍中写css。

JavaScript里写css样式的方法：

一、可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式

var elm = document.getElementById('test');
  elm.style.color = 'black';

二、通过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 = ''; //快速清空该规则的所有声明

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">    
    <title>IFE ECMAScript</title>
    <style>
        .style1{margin:10px auto ;background-color:#9999FF; display:block;color:White;
            border:1px solid white; padding:10px 25px; font-size:18px;}
        .style1:hover{ background-color:#66B3FF; cursor:pointer;}
        .style2{margin:10px auto ;background-color:gray; display:block;color:black;
            border:1px solid white; padding:10px 25px; font-size:18px;}
        .style2:hover{ background-color:black; color:White; cursor:pointer}
    </style>
    <link href="css1.css" rel="stylesheet" type="text/css" id="css"/>
</head>
<body>        
      <div>
     <input id="btnB" type="button" name="btnLogin" value="登录" class="style1" />
     <div id="tool">
      <input type="button" value="【obj.style.className】更改样式" οnclick="changeStyle1()"/>
      <input type="button" value="【obj.style.cssText】更改样式" οnclick="changeStyle2()"/>
      <input type="button" value="【obj.className】更改样式" οnclick="changeStyle3()" />
      <input type="button" value="更改外联css样式" οnclick="changeStyle4()" />
     </div>
    </div>
    <script>
        //使用obj.style.className来修改样式表的类名
        function changeStyle1() {
          var obj = document.getElementById("btnB");
          obj.style.backgroundColor= "black";     
        }
        // 使用obj.style.cssText来修改嵌入式的css
        function changeStyle2() {
           var obj = document.getElementById("btnB");
           obj.style.cssText =  "color:red; font-size:13px;";
        }
        // 使用obj.className来修改样式表的类名
        function changeStyle3() {
          var obj = document.getElementById("btnB");
          //obj.className = "style2";
          obj.setAttribute("class", "style2");
        }
        // 使用更改外联的css文件，从而改变元素的css
        function changeStyle4() {
           var obj = document.getElementById("css");
           obj.setAttribute("href","css2.css");
         }
    </script>
</body>
</html>

以上就是js里面怎么写css样式？的详细内容，更多请关注易知道|edz.cc其它相关文章！