动态地添加Script和Style文本

最新推荐文章于 2026-06-23 23:01:22 发布

转载最新推荐文章于 2026-06-23 23:01:22 发布 · 792 阅读

标签

#stylesheet #css #function #browser #include

JAVASCRIPT 专栏收录该内容

105 篇文章

订阅专栏

本文介绍了一种在JavaScript中动态加载Script和Style的方法，并提供了针对不同浏览器的兼容性解决方案。此外，还展示了如何通过JavaScript来加载外部的CSS和JS文件。

动态地添加Script和Style文本

Posted by sorrycc in Javascript

添加动态Script

var ss = document.createElement('script');
var src = 'alert("bah");';
if (window.all){ // IE
	ss.text = src;
} else { // Other Browser
	var tt = document.createTextNode(scr);
	ss.apendChild(tt);
}
var hh = document.getElementsByTagName('head')[0];
hh.appendChild(ss);

添加动态Style

var ss = document.createElement('style');
var def = 'body {color: red;}';
ss1.setAttribute("type", "text/css");
if (ss.styleSheet) {   // IE
	ss.styleSheet.cssText = def;
} else {                // Other Browser
	var tt = document.createTextNode(def);
	ss.appendChild(tt);
}
var hh = document.getElementsByTagName('head')[0];
hh.appendChild(ss1);

//如果要添加的不是文本，而是外部文件

var css ;
function include_css ( css_file ) {
    var html_doc = document . getElementsByTagName ( ' head ' )[ 0 ] ;
    css = document . createElement ( ' link ' ) ;
    css . setAttribute ( ' rel ' , ' stylesheet ' ) ;
    css . setAttribute ( ' type ' , ' text/css ' ) ;
    css . setAttribute ( ' href ' , css_file ) ;
    html_doc . appendChild ( css ) ;

    // alert state change
    css . onreadystatechange = function () {
        if ( css . readyState == ' complete ' ) {
            alert ( ' CSS onreadystatechange fired ' ) ;
        }
    }
    css . onload = function () {
        alert ( ' CSS onload fired ' ) ;
    }
    return false ;
}

var js ;
function include_js ( file ) {
    var html_doc = document . getElementsByTagName ( ' head ' )[ 0 ] ;
    js = document . createElement ( ' script ' ) ;
    js . setAttribute ( ' type ' , ' text/javascript ' ) ;
    js . setAttribute ( ' src ' , file ) ;
    html_doc . appendChild ( js ) ;

    js . onreadystatechange = function () {
        if ( js . readyState == ' complete ' ) {
            alert ( ' JS onreadystate fired ' ) ;
        }
    }

    js . onload = function () {
        alert ( ' JS onload fired ' ) ;
    }
    return false ;
}