如何动态载入CSS

我就是我 2024-04-03 14:13 81阅读 0赞

## 动态载入CSS的两种方法 ##

1.通过 文档对象创建 link节点,指定 href,然后 appendChild到页面.

这种方案大家都用过, 不过,会存在一些问题.什么问题呢?! 跨域

案例:FF下打开baidu, [Firebug][]下运行以下代码(没有firebug,就去装一个,挺好用的)

程序代码

var link = document.createElement("link");

link.rel = "[stylesheet][]";

link.type = "text/css";

link.href = "http://img9.mapbar.com/web/localsearch/version-3.4.5/mapbar.ls.all-min.css";

document.getElementsByTagName("head")\[0\].appendChild(link);

然后呢,在baidu搜索框中点一下,竟然报错:

Security error" code: "1000

安会域错误, 原因就是点击输出框后 baidu页面的JS会对 styleSheet操作, 而这个styleSheet引用于非 baidu域名, 当然不能写了.

找问题,解决问题。

2.将要载入的CSS文本定义成 JS文件, 通过 script载入文本数据, 将文本写入styleSheet

动态创建的script标签载入JS变量可以解决跨域, 真是屡试不爽, IE,FF测试正常.

两部分代码如下:

读取JS,相信大家都会

程序代码

loadCSSStyle = function(url)\{

url = "http://192.168.1.90:8000/js\_2\_css.js";

var head = document.getElementsByTagName("head")\[0\];

var script = document.createElement("script");

var thisAim = this;

script.src = url;

script.onload = script.onreadystatechange = function(arg)\{

if(!script.readyState||script.readyState=="loaded"||script.readyState=="complete")\{

//JS文件是这么写的 var JS\_TO\_CSS="body\{........无限长的内容..... \}";

var a = window\["JS\_TO\_CSS"\];

if(a)\{

setStyleText(a);

\}

\}

\};

head.appendChild(script);

\};

以下是将文本写入CSS的代码, (网上抄的)

程序代码

var setStyleText = function(str)\{

var doc = document;

var h = doc.getElementsByTagName("head")\[0\];

if(!h)return;

var style = h.getElementsByTagName("style");

var cStyle;

if (style.length == 0) \{

if(doc.createStyleSheet)\{//FF

doc.createStyleSheet();

\}else\{

cStyle = doc.createElement("style");

cStyle.setAttribute("style","text/css");

h.appendChild(cStyle);

\}

\}

var tStyle = style\[0\];

if (tStyle.styleSheet) \{

tStyle.styleSheet.cssText +=str;

\} else \{

if (doc.getBoxObjectFor) \{

tStyle.innerHTML += str;

\} else \{

tStyle.appendChild(doc.createTextNode(str));

\}

\}

\};

供大家参考.

来源：[https://www.weidianyuedu.com][https_www.weidianyuedu.com]

[Firebug]: https://so.csdn.net/so/search?q=Firebug&spm=1001.2101.3001.7020
[stylesheet]: https://so.csdn.net/so/search?q=stylesheet&spm=1001.2101.3001.7020
[https_www.weidianyuedu.com]: https://www.weidianyuedu.com

发表评论取消回复

表情：

评论列表（有 0 条评论，81人围观）

还没有评论，来说两句吧...

相关阅读

相关如何动态载入CSS

动态载入CSS的两种方法 1.通过文档对象创建 link节点,指定 href,然后 appendChild到页面. 这种方案大家都用过, 不过,会存在一些问题.什么问

我就是我/ 2024年04月03日 14:13/ 0 赞/ 82 阅读

相关动态载入CSS的两种方法

![ccf88a940c3a31703d61ec179e3a5912.jpeg][] 1.通过文档对象创建 link节点,指定 href,然后 appendChild到页面

╰半夏微凉°/ 2024年04月03日 13:25/ 0 赞/ 92 阅读

相关如何用js动态添加css

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1] 为了节省代码和写出更兼容的代码，有时我们需要用Javascr

痛定思痛。/ 2024年03月25日 07:16/ 0 赞/ 72 阅读

相关动态载入bean的工具类

/ 动态载入bean的类调用例子 PlayerService playerService = (PlayerService)Bea

秒速五厘米/ 2022年12月22日 12:28/ 0 赞/ 129 阅读

相关 uniapp动态修改样式_Vue如何动态修改CSS变量

想要动态修改css样式就得能动态的给<style></style>赋值，可是<style></style>里面又写不了变量（有可能可以但是我不会。。），所以想了个这种办法，通过

Dear 丶/ 2022年10月13日 05:25/ 0 赞/ 2154 阅读

相关 H5 canvas如何载入视频

Canvas可以载入图片，那么Canvas 也可以载入视频。 Canvas加载视频和图片是一样的，使用drawImage，区别就是给一个定时器不停的抓取每帧的画面，放入C

男娘i/ 2022年07月16日 13:53/ 0 赞/ 216 阅读

相关 canvas如何简单粗暴地载入视频

canvas加载视频和图片是一样的，使用drawImage，区别就是给一个定时器不停的抓取每帧的画面，放入Canvas画布里面，这个办法十分的简单粗暴。（粗粗粗粗~~~）

刺骨的言语ヽ痛彻心扉/ 2022年05月31日 08:07/ 0 赞/ 295 阅读

相关 vue项目如何载入ivew

vue项目引入ivew其实很简单，只需要在创建好项目后，打开package.json文件。在dependencies属性内加入: “ivew”: “版本号” ![在这

今天药忘吃喽~/ 2022年04月13日 07:19/ 0 赞/ 199 阅读

相关 vue 如何动态修改css样式（将data的值动态赋值，动态修改css样式）

废话不多说直接看代码 height 为动态传入的值（通过data获取）例子1：当我们动态修改的值为正数的时候 <view :style="[{ 'mar

曾经终败给现在/ 2021年07月26日 02:44/ 0 赞/ 1793 阅读

相关为了提高性能，怎样动态载入JS文件

超级表格是一款多人协作的在线表格。程序相当复杂，用到十几个JS文件。可是有些文件是在打开某些类型的表格时才须要载入。比如，仅仅有当打开甘特图表格时，才须要载入ga...

红太狼/ 2021年05月02日 15:03/ 0 赞/ 453 阅读