Modify Style

Modify the style by style attributes:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>悼念科比</h1>
        <script type="text/javascript">
            //通过style属性修改样式
        var h1=document.querySelector("h1")
        h1.style.backgroundColor="pink"
        h1.style.fontSize="200px"
        //点击事件转换颜色
        h1.onclick=function(){
            if(h1.style.backgroundColor=="pink")
            {h1.style.backgroundColor="yellow"}
            else{h1.style.backgroundColor="pink"}
        }
        </script>
    </body>
</html>

By modifying the style class name:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .coloryellow{
                background-color: yellow;
            }
            .colorpink{
                background-color: deeppink;
            }
            .none1{
                display: none;
            }
            .fontsize{
                font-size: 100px;
            }
            
        </style>
    </head>
    <body>
        <h1 class="coloryellow">我们都是科密！！</h1>
        <button id="kobe">切换样式</button>
        <script type="text/javascript">
            var btn= document.querySelector("#kobe")
            var h1 of = document.querySelector ( " .coloryellow " ) 
            btn.onclick = function () {
                 IF (h1.className == " coloryellow " )
                 // when two class name modifications are separated by a space 
                {h1.className = " colorpink fontSize " }
                 the else {h1.className = " coloryellow " } 
            } 
            
            
            
        </ Script > 
    </ body > 
</html>

Create a style element to modify the style:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>科比在我们心中</h1>
        <script type="text/javascript">
            var styledom=document.createElement("style"            styledom.innerHTMLWhen using multiple lines to use anti quotes//)
            
=`.coloryellow{
                background-color: yellow;
            }
            .colorpink{
                background-color: deeppink;
            }
            .none1{
                display: none;
            }
            .fontsize{
                font-size: 100px;
            }`
            var body=document.querySelector("body")
            body.appendChild(styledom)
            var h1=document.querySelector("h1")
            h1.className="colorpink"
        </script>
    </body>
</html>

Guess you like