zoukankan      html  css  js  c++  java
  • ie的一个调试方法,通过动态写入样式或者脚本

    需求:我有好几次有这样一个需求,ie6,7等情况下。线上页面样式有问题。这时候需要更改某个样式。相当无奈。
    没有firebug,蛋疼的ie下的webdeveloper等工具就是个垃圾。
    我就只是想改个样式,就是没办法。这时候,我可以通过在页面上通过javascript:方式写入脚本,来调试样式。当然这样的调试只适合简单的需求。

    代码如下:

    function loadScriptUrl(url){
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = url;
        document.body.appendChild(script);
    }
    
    function loadScriptJs(js){
        var script = document.createElement('script');
        script.type = 'text/javascript';
        try{
            script.appendChild(document.createTextNode(js));
        }catch(e){
            script.text = js;
        }
        document.body.appendChild(script);
    }
    
    function loadStyleUrl(url){
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = url;
        document.getElementsByTagName('head')[0].appendChild(link);
    }
    
    function loadStyleCss(css){
        var style = document.createElement('style');
        style.type = 'text/css';
        try{
            style.appendChild(document.createTextNode(css))
        }catch(e){
            style.styleSheet.cssText = css;
        }
        document.getElementsByTagName('head')[0].appendChild(style);
    }
    
    
    function loadScriptUrl(url){var script=document.createElement('script');script.type='text/javascript';script.src=url;document.body.appendChild(script)}
    function loadScriptJs(js){var script=document.createElement('script');script.type='text/javascript';try{script.appendChild(document.createTextNode(js))}catch(e){script.text=js}document.body.appendChild(script)}
    function loadStyleUrl(url){var link=document.createElement('link');link.rel='stylesheet';link.type='text/css';link.href=url;document.getElementsByTagName('head')[0].appendChild(link)}
    function loadStyleCss(css){var style=document.createElement('style');style.type='text/css';try{style.appendChild(document.createTextNode(css))}catch(e){style.styleSheet.cssText=css}document.getElementsByTagName('head')[0].appendChild(style)}
    

    以上代码从上到下,依次是动态的,1加载js外部脚本地址,2加载直接写的js片段,3加载外部css地址,4加载css片段
    下面4行是压缩过的上面的代码。方便直接复制到浏览器


    下面是一个,使用第4种方式的,直接写css片段,内容写在最后一个括号里就可以了。
    需要注意的是:
    1 在ie6-8下,直接复制可使用
    2 chrome,opera,ie9下需要手动输入javascript:。直接复制,会自动去掉javascript:
    3 ff下无效,但是ff有了firebug根本就不需要了,这种调试方式了

    javascript:(function loadStyleCss(css){var style=document.createElement('style');style.type='text/css';try{style.appendChild(document.createTextNode(css))}catch(e){style.styleSheet.cssText=css}document.getElementsByTagName('head')[0].appendChild(style)})();

    参考资料:高级3

  • 相关阅读:
    负反馈
    阻抗匹配
    音频功放电路
    ##Springboot框架的简单分享,让你入门不是难事
    ##如何用安全框架去实现登陆功能?(包含去实现用户名的实现)
    ##如果你的JVM的小红小绿提示你需要更新怎么办?下面来教你一下子解决
    ##如果我们要用分布式做项目,那么需要安装一个zookeeper,下面给大家简单分享下安装步骤
    ##ENGINE=MYISAM AUTO_INCREMENT=30 DEFAULT CHARSET=utf8
    ##SSM框架整合(Spring框架/Spring MVC框架/Mbatis框架)
    ##SSM框架整合中web.xml配置文件
  • 原文地址:https://www.cnblogs.com/lunalord/p/2515227.html
Copyright © 2011-2022 走看看