Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >JS动态添加/删除css文件

JS动态添加/删除css文件

作者头像
Jensen_97
发布于 2023-07-20 06:16:06
发布于 2023-07-20 06:16:06
64100
代码可运行
举报
文章被收录于专栏:技术客栈技术客栈
运行总次数:0
代码可运行

1、动态添加css文件,js写法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function loadStyles (file) {
    var fileref = document.createElement("link")
    fileref.setAttribute("rel", "stylesheet")
    fileref.setAttribute("type", "text/css")
    fileref.setAttribute("href", file)
}
// 使用,file是css文件路径
loadStyles('./test.css')

2、动态添加css文件,jq写法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function addStyle(file){
   $('head').append('<link href=' + file + ' rel="stylesheet" type="text/css">')
}

3、动态删除css文件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function removeStyles (file) {
    var filename = file;
    var targetelement = "link";
    var targetattr = "href";
    var allsuspects = document.getElementsByTagName(targetelement);
    for (var i = allsuspects.length; i >= 0; i--) {
        if (allsuspects[i] && allsuspects[i].getAttribute(targetattr) != null && allsuspects[i].getAttribute(
            targetattr).indexOf(filename) != -1) {
            allsuspects[i].parentNode.removeChild(allsuspects[i])
        }
    }
}
// 使用,file是css文件路径
removeStyles('./test.css')
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
动态加载JS 和 CSS
<script type="text/javascript"> $(function () { var filename = '/assets/css/main.css'; var fileref = document.createElement("link"); fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css"); fileref.setAttribute("href", filename)
逸鹏
2018/04/10
30.1K0
js实用方法记录-js动态加载css、js脚本文件
方法测试:openApp('ios页面','**.apk','metools://home');
易墨
2018/09/14
17.8K0
JavaScript DOM基础
DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口)。 一.DOM介绍 DOM中的三个字母,D(文档)可以理解为整个Web加载的网页文档;O(对象)可以理解为类似window对象之类的东西,可以调用属性和方法,这里我们说的是document对象;M(模型)可以理解为网页文档的树型结构。 DOM有三个等级,分别是DOM1、DOM2、DOM3,并且DOM1在1998年10月成为W3C标准。DOM1所支持的浏览器包括IE6+、Firefox、Safa
汤高
2018/01/11
1.4K0
前端JS判断远程文件是否加载
每次在开发项目的时候为方便快捷开发,前端一般都直接使用CDN进行远程文件调用省却多级目录的问题。但这样一般都埋下了潜在的问题,就是怎么知道该远程文件是否已经加载的呢?
谭广健
2020/12/01
14.4K0
js面试题(二)
世间万物皆对象
2024/03/20
1050
用JavaScript来加载css、js文件
友儿
2023/10/21
2820
原生JS动态添加、删除元素&内容
创建元素 createElement ,创建内容 createTextNode ,添加元素 appendChild
德顺
2019/11/13
27.5K0
JS-DOM 综合练习-动态添加删除班级成绩表
费了2个小时,才把原理弄懂,把问题逐个解决,当你发现你最后栽的那个点,是一个小石头拌的你,你起来是该哭还是该笑呢?只怪自己习武不精吧。 虽然问题都解决了,但是还有一个余留的问题就是鼠标经过input时,怎么修改背景颜色的问题。 这一节有点乱,虽然整理的代码编了问题序号。可我相信,再过几天自己回头看肯定还是一头雾水。 so,附上具体问题网址:http://www.imooc.com/code/1636 以下是html整件 <!DOCTYPE html> <html> <head> <meta chars
xing.org1^
2018/05/17
3.7K0
JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战(动态添加删除表格)
上一博文种讲解了JavaScript基础的ECMAScript,包括基本语法和部分对象,本文中继续讲解JavaScript中比较重要的两部分内容BOM、DOM及事件,后文中有对应的实战练习。
Winter_world
2020/09/25
2.2K0
JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战(动态添加删除表格)
Mirages短代码使用
支持 m3u8、mp4,flv 和 mkv 格式,不过编码必须是 H.264 AAC
ZGGSONG
2022/09/09
2.4K0
Mirages短代码使用
常用js,css文件统一加载方法,并在加载之后调用回调函数
为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护。所以我用js写了以下方法,存放在“sourceController.js”文件内。 /** * Created by MingChen on 2016/11/3. */ function sourceController() { this.root = ""; this.callfunc = null; // 回调函数 this.css = []; thi
就只是小茗
2018/03/07
3.5K0
JS魔法堂:LINK元素深入详解
一、前言                               我们一般使用方式为 <link type="text/css" rel="stylesheet" href="text.css"> 来引入外部层叠式样式文件,但LINK元素各属性的具体含义、资源加载行为等方面却了解不多,本文打算稍微深入一下。   由于内容较多,特设目录一坨: 二、到底有没有结束标签? 三、普通属性介绍 四、属性disabled详解 1. Attribute和Property的disabled 2. dis
^_^肥仔John
2018/01/18
3.3K0
JS魔法堂:LINK元素深入详解
【兼容性】js 浏览器兼容问题处理方式
document.getElementById(“header”).style.styleFloat = “left”;
前端修罗场
2023/10/07
3500
JavaScript图片库
将图片放到网上的方法有很多,你可以简单地把所有的图片都放到网页上。但是,如果你打算发布的图片过多,这个页面很快会变的过于庞大,而且加上这些图片后用户要下载的的数据量就会变得相当可观。我们必须面对这样一个现实:没有人会等待很长长时间去下载一个网页;所以利用JavaScript来创建一个图片库将是最佳的选择; 说下步骤: 第一步:把整个图片库的链接都加载到图片库的主页里; 第二步:当用户点击对应的超链接时,拦截网页的默认行为,即(超链接点击跳转行为); 第三步:当用户点击对应的超链接后,把"占位符"图片替换成那
郑小超.
2018/01/24
3.7K0
javaScript动态添加Li元素「建议收藏」
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/152096.html原文链接:https://javaforall.cn
全栈程序员站长
2022/06/25
2.2K0
使用DOM动态创建标签
本文是参考《javascript Dom 编程艺术》第八章的内容所写,用到的知识点,就是关于创建平稳的web页面。 使用DOM方法:   getElementById()   getElementsByTagName()   getAttribute() setAttribute()   createElement()   createTextNode()   appendChild()   首先网页只是一段简单的html,含有部分复杂的标签。   <abbr>用于缩写,<blockqu
用户1154259
2018/01/17
1.8K0
使用DOM动态创建标签
微信刷屏的「给我一面国旗」如果要做到,技术原理是什么?
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
养码场
2019/09/26
7480
微信刷屏的「给我一面国旗」如果要做到,技术原理是什么?
DOM
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次变化的节点树,允许开发人员添加、移除和修改页面的某一部分。
奋飛
2019/08/15
1.5K0
Js DOM
要创建新的 HTML 元素 (节点)需要先创建一个元素,然后在已存在的元素中添加它。
hss
2022/02/25
3.7K0
第三方Javascript开发系列之投放代码
本文先从第三方Javascript脚本的重要组成部分“投放代码”讲起。先从一个最例子看起:Google Analytics(以下简称GA),是Google提供的用于网站监测等一系列功能的服务。网站开发者将GA提供的投放代码放到自己网站上需要监测的页面(一般是全站添加)。
mmzhou
2018/08/06
9900
第三方Javascript开发系列之投放代码
相关推荐
动态加载JS 和 CSS
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验