• 技术文章 >web前端 >css教程

    js如何修改css

    coldplay.xixicoldplay.xixi2021-04-16 14:48:17原创2419

    js修改css的方法:1、使用【obj.style.cssTest】来修改嵌入式的css;2、使用【bj.className】来修改样式表的类名;3、使用更改外联的css文件,从而改变元素的css。

    大前端零基础入门到就业:进入学习

    本教程操作环境:windows7系统、css3版,DELL G3电脑。

    js修改css的方法:

    方法一、使用obj.style.cssTest来修改嵌入式的css

    function changeStyle2() {
       var obj = document.getElementById("btnB");
       obj.style.cssText = " display:block;color:White;
     
    }

    方法二、使用bj.className来修改样式表的类名

    使用代码来修改btB引用样式的类名,如下段代码:

    function changeStyle3() {
      var obj = document.getElementById("btnB");
      //obj.className = "style2";
      obj.setAttribute("class", "style2");
    }

    通过更改btB的css的类名的方式来更改样式,更改样式类名有两种方式。1、obj.className = "style2"; 2、 obj.setAttribute("class", "style2");都是一样的效果。

    用这种方式来修改css比上面的效果要好很多。

    方法三、使用更改外联的css文件,从而改变元素的css

    通过更改外联的css文件引用从而来更改btB的样式,操作很简单。代码如下:

    首先得引用外联的css文件,代码如下:

    <link href="css1.css" rel="stylesheet" type="text/css" id="css"/>
     
    function changeStyle4() {
       var obj = document.getElementById("css");
       obj.setAttribute("href","css2.css");
     }

    相关教程推荐:CSS视频教程

    以上就是js如何修改css的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:js 修改css
    上一篇:css如何清除样式 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• dedecms怎么修改css• php如何修改css属性?• bootstrap 如何修改css样式• 小程序怎么用js修改css
    1/1

    PHP中文网