<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--<link href="test.css" type="text/css" />-->
<script type="text/javascript">
//动态加载css文件
function addCss(href) {
if (isLoadedCss(href)) {
return;
}
var container = document.getElementsByTagName("head")[0];
var addCss = document.createElement("link");
//addCss.id = href;
addCss.rel = "stylesheet";
addCss.type = "text/css";
addCss.media = "screen";
addCss.href = href;
container.appendChild(addCss);
}
//addCss('test.css');
//判断是否加载过css文件，
//以下列出4种方法，推荐第一种，或第二种。
//判断是否加载过css,
function isLoadedCss(href) {
var links = document.getElementsByTagName("link"); //得到所有的link对象集合
for (var i = 0; i < links.length; i++) //依次判断每个link对象
{
if (links[i].href == href) {
return true;
}
}
return false;
}
var loadedCss = {}; //类似于map
//判断是否加载过css,
function isLoadedCss2(href) {
if (loadedCss[href]) {
return true;
} else {
loadedCss[href] = true;
return false;
}
}
var addedCss = ""; //保存已经绑定文件名字的字符串
//判断是否加载过css,
function isLoadedCss3(href) {
if (addedCss.indexOf("[" + href + "]") > -1) {// indexOf判断数组里是否有某一项
return true;
} else {
addedCss += "[" + href + "]"; //把文件名字添加到addedCss
}
}
//判断是否加载过css,
function isLoadedCss4(href) {
var cssTag = document.getElementById(href);
if (cssTag) {
return true;
} else {
return false;
}
}
</script>
</head>
<body>
<input type="button" onClick="addCss('test.css')" value="测试" />
</body>
</html>
其他相关js
document.getElementById("elementId").style.background="#ff0000";
document.getElementsByTagName("a")[0].style.cssText = "background:#ff0000;border:1px #dfdfdf solid;";
相关推荐
JS动态加载CSS 在可换主题的界面中具有很重要的意义，用户可以根据自己的浏览习惯选择自己喜欢的页面显示方式，下面详细说明。 希望下面的方法对你有帮助。 （1）使用JavaScript动态加载Js文件 /*JavaScript动态...
在提供的压缩包文件中，`Browes 判断.asp`和`Browes 浏览器判断.asp`可能是用于服务器端进行浏览器检测的ASP文件，而`CheckBr(动态加载Css).js`可能是用于客户端JavaScript动态加载CSS并进行浏览器判断的脚本。...
当项目js（css）文件使用越来越多，js 文件的加载也成了性能上的一个问题，此资源能够在页面全部加载完成后异步加载js等资源文件，它可以顺序加载资源列表，也可以并发加载资源列表，它包含一个方法调用接口：...
- 使用`Attributes.Add`方法添加CSS文件的类型、关系以及路径： - `type`: 设置为`"text/css"`。 - `rel`: 设置为`"stylesheet"`。 - `href`: 设置为传入的`virtualPath`参数。 最终，将创建好的`...
JavaScript动态加载资源文件是指在页面加载完成后，根据需要从服务器动态加载额外的脚本（js文件）或样式表（css文件）。这种方法可以减少初始页面加载时的资源消耗，提高页面的加载速度。动态加载可以通过两种方式...
1、动态加载js，css文件(用原生js和jquery) iframe结构： frame0(父) frame2（子） frame3（子） frame2中触发事件，动态的向frame3中 加载js、css文件和 dom元素？ *同级之间可以调用，可以 通过 子-父-子 的方式...
动态加载JS文件和CSS文件，多浏览器支持。多个JS文件同时加载，加载完成后执行回调方法。 使用方法: var loader=new RemoteLoader(); loader.loadFiles(["yy.js","jj.jus"],作用域);
#### 代码示例：动态添加CSS文件 ```csharp using System.Web.UI.HtmlControls; HtmlGenericControl myCss = new HtmlGenericControl(); myCss.TagName = "link"; myCss.Attributes.Add("type", "text/css"); ...
JavaScript 动态加载 CSS 是网页开发中一种常用的技术，它允许开发者在运行时根据需要引入 CSS 文件，提高页面性能和用户体验。以下是对标题和描述中所述知识点的详细说明： 1. **@import 语句**： 在 CSS 文件中...
除了直接操作`<style>`元素，还可以动态加载外部CSS文件。通过创建`<link>`元素并设置`href`属性指向CSS文件，可以实现动态引入CSS： ```javascript let link = document.createElement('link'); link.rel = '...
这种技术通常被称为“文件合并与压缩”，它将多个js和css文件合并为一个文件，并去除其中不必要的空白、注释以及进行其他优化，以减小文件大小。下面将详细介绍这一过程及其相关知识点。 首先，我们要了解为什么要...
动态引用外部JS和CSS文件是提升网页加载效率和灵活性的一种常见技术。下面将详细介绍这个知识点。 首先，我们理解静态引用和动态引用的区别。静态引用通常在HTML文档中通过`<script>`和`<link>`标签完成，例如： `...
本文将详细探讨MUI中的JavaScript文件与CSS文件如何协同工作，以实现强大的功能和美观的界面。 一、MUI的JS文件 MUI的JavaScript文件主要负责交互逻辑和组件的动态行为。这些文件通常包括基础库、组件库以及特定...
首先，我们来看一个简单的JavaScript函数，用于动态添加CSS链接到页面头部： ```javascript function addStyle(stylePath) { var container = document.getElementsByTagName("head")[0]; var addStyle = ...
// JavaScript Document ;(function($){ $.extend({ includePath: '', include: function(file) { var files = typeof file == "string" ? [file]:file; for (var i = 0; i ; i++) { var name = files[i]...
在网页开发中，视频播放功能是一项重要的组成部分，而"Video需要的js和css文件"这个主题则涉及到在网页上实现视频播放所必需的JavaScript库和样式表文件。在这个压缩包中，我们找到了三个核心文件：video.min.js，...
在IT行业中，优化网站性能是至关重要的，其中一项关键技术就是对JavaScript（JS）和CSS文件进行压缩。"JS_CSS文件压缩工具(2)"是一个专为此目的设计的小型实用程序，它能够帮助开发者批量处理文件，以减少网页加载...