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>
  • 相关阅读:
    sqllite小型数据库的使用
    winform打开本地html页面
    【app】自动化必备之adb使用
    【app】自动化环境搭建(Appium)for java
    【app】Hybrid?Native?不知道你就out了!
    589. N叉树的前序遍历
    590. N叉树的后序遍历
    897. 递增顺序查找树
    559. N叉树的最大深度
    108. 将有序数组转换为二叉搜索树
  • 原文地址:https://www.cnblogs.com/xiangru0921/p/6514225.html
Copyright © 2011-2022 走看看