• 技术文章 >web前端 >前端问答

    js如何控制css

    藏色散人藏色散人2021-07-10 10:57:53原创222

    js控制css的方法:1、通过style属性或者“setAttribute()”来更改样式;2、改变伪类“(after,before)”的“content”内容;3、通过更改类名来更改样式等等。

    本文操作环境:windows7系统、javascript1.8.5&&CSS3版,DELL G3电脑

    js如何控制css?

    JS控制css样式的几种方式

    我们在js的工作学习中总会遇到一些不轻易通过style属性动态加载css样式的情况(eg:伪类的样式控制,动画的样式控制),这里总结一下js改变样式的几种方法:

    1,通过style属性或者setAttribute()来更改样式

    ele.style.width='50px';//最常用
    ele.style.cssText='width:50px';//并不会覆盖原先所有css
    ele.style.setProperty("width", "50px", "important");//可以传第三个参数
    ele.setAttribute("style", "width: 50px")//也不会覆盖原先所有css放心用
    ele.style.width='50px';//最常用
    ele.style.cssText='width:50px';//并不会覆盖原先所有css
    ele.style.setProperty("width", "50px", "important");//可以传第三个参数
    ele.setAttribute("style", "width: 50px")//也不会覆盖原先所有css放心用

    2,如果只是改变伪类(after,before)的content内容也可以这么做

    //css代码
    div::after{
        content:attr(data-myadd);
        width:10px;
    }
    //js代码
    div.setAttribute('data-myadd',需要动态加载的内容)
    //css代码
    div::after{
        content:attr(data-myadd);
        width:10px;
    }
    //js代码
    div.setAttribute('data-myadd',需要动态加载的内容)

    3,通过更改类名来更改样式

    ele.className='';
    ele.classList.add();//emmmm没什么好说的
    ele.className='';
    ele.classList.add();//emmmm没什么好说的

    4,那么重点来了:利用document.styleSheets我们获取到所有样式表,然后选择一个样式表通过 insertRule 来添加样式;也可以创建新的cssRules,通过addRule()来添加样式

    document.styleSheets:获取到的是所有样式列表的集合
    href:通过link标签引入的样式表,则是样式表的URL,否则为null
    media:当前样式表支持的所有媒体类型集合
    type:样式表类型的字符串
    disabled: 通过disabled来屏蔽掉该样式表,可以用来切换样式表 ; document.styleSheets[i].disabled = true
    cssRules:是当前样式列表的所有样式集合;document.styleSheets[i].cssRules
    cssText:当前样式表的某一个样式的样式document.styleSheets[i].cssRules[i].cssText
    selectorText:当前样式的选择符
    parentStyleSheet:当前规则所属样式表;IE不支持
    insertRule(rule,index):在index前插入一条rule新规则; document.styleSheets[0].insertRule('* {background:blue;color:#000}',0)不支持IE;document.styleSheets[0].addRule('*',' {background:blue;color:#000}',0)支持IE;
    deleteRule(index):删除某个央视列表的第index个样式;IE用removeRule(index)
    //使用document.styleSheets获取样式表的时候最好获取最后一个,在最后一个样式表上添加样式
    var sheets=document.styleSheets;
    var lastSheet=sheets[sheets.length-1];
    lastSheet.insertRule('#div{width:10px}',index)//将#div样式直接添加到cssRules中;index是添加到第几条;现代浏览器
    lastSheet.addRule('div','width:10px;',0)//IE浏览器
    //使用document.styleSheets获取样式表的时候最好获取最后一个,在最后一个样式表上添加样式
    var sheets=document.styleSheets;
    var lastSheet=sheets[sheets.length-1];
    lastSheet.insertRule('#div{width:10px}',index)//将#div样式直接添加到cssRules中;index是添加到第几条;现代浏览器
    lastSheet.addRule('div','width:10px;',0)//IE浏览器

    5,动态加载样式表

    如果需要更改的样式比较多,还是建议通过动态加载样式的方式来改变页面样式

    //改变样式文件的引用
    function loadStyle(url){
      var link = document.createElement('link');
        link.type = 'text/css';
        link.rel = 'stylesheet';
        link.href = url;
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(link);
    }
    loadStyle('test.css');
    //动态加载css代码片段
    var style = document.createElement('style');
        style.type = 'text/css';
        style.rel = 'stylesheet';
        try{ //Chrome Firefox Opera Safari
            style .appendChild(document.createTextNode(code));
        }catch(ex){//IE
            style.styleSheet.cssText = code;
        }
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(style);
    }
    loadCssCode('body{background-color:#f00}');
    //改变样式文件的引用
    function loadStyle(url){
      var link = document.createElement('link');
        link.type = 'text/css';
        link.rel = 'stylesheet';
        link.href = url;
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(link);
    }
    loadStyle('test.css');
     
    //动态加载css代码片段
    var style = document.createElement('style');
        style.type = 'text/css';
        style.rel = 'stylesheet';
        try{ //Chrome Firefox Opera Safari
            style .appendChild(document.createTextNode(code));
        }catch(ex){//IE
            style.styleSheet.cssText = code;
        }
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(style);
    }
    loadCssCode('body{background-color:#f00}');

    推荐学习:《javascript高级教程

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

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:js css
    上一篇:css3中column-span有什么用 下一篇:css怎么消除默认样式
    线上培训班

    相关文章推荐

    • css怎么设置斜体字效果• css中怎么设置虚线上边框• 手把手教你使用CSS自定义好看的滚动条样式!• css中id选择器和class选择器有何不同

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网