zoukankan      html  css  js  c++  java
  • js改变css样式的三种方法

    共用代码:

    <div id="div">这是一个盒子</div>
    var div = document.getElementById("div");

    第一种:用cssText

    div.style.cssText='600px;height:250px;border:1px red solid;text-align: center;line-height: 250px;';

    第二种:用setProperty()

     div.style.setProperty('width','700px');
     div.style.setProperty('height','300px');
     div.style.setProperty('line-height','300px');
     div.style.setProperty('background','#f00');
     div.style.setProperty('color','#fff');
     div.style.setProperty('border','1px solid blue');
     div.style.setProperty('text-align','center');

    第三种:使用css属性对应的style属性

     div.style.width = "800px";
     div.style.height = "250px"; 
     div.style.lineHeight = "250px"; 
     div.style.background = "#000";
     div.style.color = "#fff";
     div.style.border = "1px solid #111";
     div.style.textAlign = "center";
    <body>
            <div id="div">这是一个盒子</div>
            <script type="text/javascript">
                var div = document.getElementById("div");
                
                //第一种:用cssText
                div.style.cssText='600px;height:250px;border:1px red solid;text-align: center;line-height: 250px;';
                
                //第二种:用setProperty()
                div.style.setProperty('width','700px');
                div.style.setProperty('height','300px');
                div.style.setProperty('line-height','300px');
                div.style.setProperty('background','#f00');
                div.style.setProperty('color','#fff');
                div.style.setProperty('border','1px solid blue');
                div.style.setProperty('text-align','center');
                
                //第三种:使用css属性对应的style属性
                div.style.width = "800px";
                div.style.height = "250px"; 
                div.style.lineHeight = "250px"; 
                div.style.background = "#000";
                div.style.color = "#fff";
                div.style.border = "1px solid #111";
                div.style.textAlign = "center";
            </script>
        </body>
  • 相关阅读:
    Elastic Search(一)
    嵌入式jetty
    mybatis中的#{}和${}的区别
    拦截器和过滤器的区别
    springboot对拦截器的支持
    Springboot对filter的使用
    springboot对监听器Listener的使用
    随机数的基本概念
    hashset和treeset区别
    java中常见的api方法记录
  • 原文地址:https://www.cnblogs.com/xiangru0921/p/6514225.html
Copyright © 2011-2022 走看看