如何通过js动态的加载css样式文件

已于 2023-08-03 10:41:03 修改
阅读量732 收藏
点赞数 1
分类专栏： 前端 文章标签： javascript css 开发语言
于 2017-06-15 11:14:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36122298/article/details/73277094
版权

对于某些某些特殊情况下需要通过js动态加载某些样式文件：

其实很简单只需要在jsp的头部加上：

                                                                图一

图中id自己随便定义

然后在js中

                                                            图二

红圈内的内容是图一中定义的id，里面的css改为自己需要的即可

是不是很简单

卖报的火柴人
关注
专栏目录
使用javaScript动态加载Js文件和Css文件
10-23
主要介绍了如何使用javaScript动态加载Js文件和Css文件
JS 动态加载js文件和css文件 同步/异步的两种简单方式
10-21
加载css文件通过创建link元素，并设置其rel属性为stylesheet，type属性为text/css，以及href属性为css文件的路径。示例代码如下： ```javascript function loadCssFile(url){ var link = document.createElement('...
JS动态加载JS与CSS文件
zhandeen的专栏
10-05 505
一 HTML页面   jsforjscss.html 1 2 3 4 5 6 无题目文档 7 8 9 10 二 动态加载js文件的法度   loadjscssfile.js // JavaScript Document function loadjscssfile（filename，filetype）{ i
动态加载js与css文件
最新发布
Jerry_zpon的博客
03-02 1072
在前端日常开发中，肯定会遇到这样的需求场景：一个使用频率很低的功能引入了较大的第三方SDK，且第三方SDK没有提供相应的npm包，无法按需引入，只能在index.html中使用标签的方式引入，导致项目启动的时候需要加载较多的文件，带来了首屏渲染的时间延长。动态创建时，可能遇到已经创建过该元素并添加到body中，重复创建的有点浪费（DOM的创建很浪费资源），所以在创建时判断当前文件是否已经存在。所以可以采用资源的动态加载，只有在需要的时候去动态加载相应的资源文件。监听加载成功与失败执行相应的回调函数。
js动态载入css文件,原生JS动态加载JS、CSS文件及代码脚本
weixin_39609822的博客
08-03 300
DOM readyState属性共5中状态uninitialized：初始状态loading：document加载中loaded: document加载完成interactive：已加载并可与用户交互，但还需要加载图片等其他资源complete：全部资源加载完成DOM文档加载顺序：解析HTML结构加载外部脚本和样式表文件(loading)解析并执行脚本DOM树构建完成(readyState：int...
js动态载入css文件,使用js加载器动态加载外部js、css文件
weixin_33998152的博客
08-03 675
let MiniSite = newObject();/*** 判断浏览器*/MiniSite.Browser={ie:/msie/.test(window.navigator.userAgent.toLowerCase()),moz:/gecko/.test(window.navigator.userAgent.toLowerCase()),opera:/opera/.test(window.n...
Js动态加载CSS样式文件的2种方法
weixin_43079157的博客
11-13 1773
动态加载CSS文件，这个时常会用到，一般搞前端，我们最先想到的就是用JS来实现，的确，JS可以很方便的控制CSS样式表文件的动态插入，以下两种方法：使用一，使用这点采用了YUI插件中的一个方法，有效解决了各大浏览器的兼容性问题，主要是使用style.appendChild（document.createTextNode（styles））;采用createTextNode将CSS代码添加到01 &l...
javascript 动态修改css样式方法汇总(四种方法)
11-23
在JavaScript中提供几种方式动态的修改样式，下面将介绍方法的使用、效果、以及缺陷。 1、使用obj.className来修改样式表的类名。 2、使用obj.style.cssTest来修改嵌入式的css。 3、使用obj.className来修改样式表的...
html动态加载css样式和js脚本示例
12-13
我们就不得不引入太多的 JS 脚本而降低了整站的性能，所以就出现了动态脚本的概念，在适时的时候加载相应的脚本。比如：我们想在需要检测浏览器的时候，再引入检测文件。 复制代码代码如下:[removed] [removed] = ...
动态加载js和css(外部文件)
10-27
本文详细介绍下，如何动态加载外部js文件及js；动态加载外部css样式及css样式，感兴趣的朋友可以参考下哈，希望对你学习js有所帮助
如何实现JavaScript动态加载CSS和JS文件
11-22
总结，通过创建`<link>`和`<script>`元素，并将它们添加到`<head>`，可以实现在JavaScript中动态加载CSS和JS文件。这种方法在实现按需加载、优化性能以及处理跨域资源时非常有用。不过，确保正确处理加载顺序和错误...
js动态加载css文件
05-15 154
&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html;charset=utf-8"&gt; &lt;!--&lt;link href="test.css" type="text/css" /&gt;--&gt; &lt;
js动态加载css和js文件
milli236的博客
02-11 496
css// 动态加载css路径文件 function loadStyles(url) { let link = document.createElement("link"); link.type = "text/css"; link.rel = "stylesheet"; link.href = url; ...
JavaScript动态加载JS和CSS文件
A_Runner的博客
05-15 976
“昨夜星辰昨夜风,画楼西畔桂堂东” 动态加载JS文件 可以使用jQuery方法来加载JS文件: $.getScript("test.js", function(){ console.info('动态加载JS完成'); }); getScript这个方法的定义和用法: 第二个参数是一个函数,在加载完成后执行; 动态加载CSS 文件 $("...
JavaScript加载js和css文件方法
Java
02-06 681
JavaScript加载js和css文件方法 var ISDEBUG = true; function loadSource(src){ this.src = src; var srcs = this.src.split(","); loadSource.prototype.loadJS = loadSource.prototype.loadjs = function() { var s =
【随手记】js动态载入js/css
qq_48896417的博客
08-25 1817
js动态载入js/css和设置自适应fontsize。
jquery 动态加载css,js文件
热门推荐
我叫陈小皮。
11-07 1万+
动态加载css文件:$('#btn').click(function(){ $('head').children(':last').attr({ rel: "stylesheet", type: 'text/css', href: './style.css', }); })动态加载js文件: $.getScript(url,c
JS动态加载JS和CSS文件的方法
BillyWang2016的博客
03-10 522
1.动态加载JS文件的方法如下： $.getScript("js/jquery.js", function() { //todo something });使用ajax的简写方法 $.getScript来加载； 2.动态加载CSS文件的方法如下： function loadStyles(url) {    var link = document.createElemen
jQuery动态加载CSS与JS文件详解及示例
这篇文章还提到了一个扩展了的jQuery方法，用于同时加载CSS和JS文件，如： ```javascript $.extend({ includePath: '', include: function(file) { // ... 代码逻辑处理文件列表和扩展名判断 // 示例：根据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值