zoukankan      html  css  js  c++  java
  • 使用js修改css样式表

    有些情况下,我们需要页面加载时就快速修改元素的样式,但如果在页面dom加载完后再修改css,虽然元素样式快速变化,但肉眼能观察到,所以需要JS动态生成样式表,声明所希望的css样式.执行js时,页面会有很短暂的阻塞,等js执行完毕后,浏览器会根据所修改的样式继续渲染css.这样的样式才不会"闪一下"
    .
    以下是js代码,动态增加style
    function addCSS(cssText){
            var style = document.createElement('style'),  //创建一个style元素
                head = document.head || document.getElementsByTagName('head')[0]; //获取head元素
            style.type = 'text/css'; //这里必须显示设置style元素的type属性为text/css,否则在ie中不起作用
            if(style.styleSheet){ //IE
                var func = function(){
                    try{ //防止IE中stylesheet数量超过限制而发生错误
                        style.styleSheet.cssText = cssText;
                    }catch(e){
    
                    }
                }
                //如果当前styleSheet还不能用,则放到异步中则行
                if(style.styleSheet.disabled){
                    setTimeout(func,10);
                }else{
                    func();
                }
            }else{ //w3c
                //w3c浏览器中只要创建文本节点插入到style元素中就行了
                var textNode = document.createTextNode(cssText);
                style.appendChild(textNode);
            }
            head.appendChild(style); //把创建的style元素插入到head中
        }
    //调用方法
    addCSS('#init{display:block;}.mobile-wrap{visibility:hidden')
     
  • 相关阅读:
    RHEL7挂载ISO做本地yum
    服务器虚拟化架构突出优势
    国内公共DNS
    世界上最小的发行版之一Tiny Core
    VMware v12.1.1 专业版以及永久密钥
    Webbench网站压力测试
    Web.xml配置详解之context-param
    SpringMvc自动代理
    SpringMvc aop before
    SpringMvc 面向切面1
  • 原文地址:https://www.cnblogs.com/ch459742906/p/8472115.html
Copyright © 2011-2022 走看看