最新公告
  • 欢迎您光临网站无忧模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 用js怎么改变css样式

    正文概述 六哥   2021-07-6   42

    方法:1、使用“对象.style.属性名="值"”;2、使用“对象.style.cssText="属性名:值"”;3、使用“对象.setAttribute("class","类名")”;4、用setAttribute()函数更改css文件。

    本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    javascript修改css样式的方法(四种)

    第一种:使用对象.style.属性名="值来修改样式表的类名。

    例如:

    div1.style.width="100px";

    第二种:使用对象.style.cssText="属性名:值"来修改嵌入式的css。

    例:

    div1.style.cssText="width:100px;height:100px;background: palevioletred;";

    第三种:使用对象.setAttribute("class","类名")来修改样式表的类名。

    例如:

    div1.setAttribute("class","div2")

    第四种:使用setAttribute()函数更改外联的css文件,从而改变元素的css。

    例如:

    div1.setAttribute("href","css2.css");

    html代码:

    <link href="css/css1.css" rel="stylesheet" id="cssLink" />
    <div id="divBtn1" onclick="changeCss1()">1</div>
    <div id="divBtn2" onclick="changeCss2()">2</div>
    <div id="divBtn3" onclick="changeCss3()">3</div>
    <div id="divBtn4" onclick="changeCss4()">4</div>

    css1.css文件

    @charset "utf-8";
    #divBtn1,#divBtn2,#divBtn3,#divBtn4{
        width:100px;
        height:100px;
        margin-bottom: 10px;
    }
    #divBtn1{background:yellowgreen;}
    #divBtn2{background:paleturquoise;}
    #divBtn3{border:1px solid #ccc}
    #divBtn4{background:blue;}
    .div3{width:100px;height:100px;background:blueviolet}

    css2.css文件

    @charset "utf-8";
    #divBtn4{background: greenyellow;}
    #divBtn1,#divBtn2,#divBtn3,#divBtn4{
        width:200px;
        height:200px;
        border:1px solid #ccc;
        margin-bottom: 10px;
    }
    #divBtn1{background:yellowgreen;}
    #divBtn2{background:paleturquoise;}
    .div3{width:100px;height:100px;background:blueviolet}

    js代码:

    <script>
                /*
                 *javascript动态修改css效果的方法(四种) 
                 * 第一种:div1.style.width="100px";
                 * 第二种:div2.style.cssText="width:100px;height:100px;background: palevioletred;";
                 * 第三种:div1.setAttribute("class","div2")和div3.className="div3";//效果一样
                 * 第四种:使用更改外联的css文件,从而改变元素的css
                 * obj.setAttribute("href","css/css2.css");
                 * */
                function changeCss1(){
                    var div1=document.getElementById("divBtn1");
                    div1.style.width="100px";
                    div1.style.height="100px";
                    div1.style.background="red";
                }
                function changeCss2(){
                    var div2=document.getElementById("divBtn2");
                    div2.style.cssText="width:100px;height:100px;background: palevioletred;";                //cssText会覆盖之前的设置  无兼容性问题  写法和css样式表相同
                }
                function changeCss3(){
                    var div3=document.getElementById("divBtn3");                //div3.className="div3";//效果一样
                    div3.setAttribute("class","div3");
                }
                function changeCss4(){
                    var obj=document.getElementById("cssLink");
                    obj.setAttribute("href","css/css2.css");
                }
            </script>

    更多编程相关知识,请访问:编程视频!!

    以上就是用js怎么改变css样式的详细内容,更多请关注网站无忧资源网其它相关文章!


    网站无忧 » 用js怎么改变css样式

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    发表评论

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者
    升级SVIP尊享更多特权立即升级