首页 > 其他分享 >js 动态添加样式

js 动态添加样式

时间:2023-06-03 12:33:49浏览次数:42  
标签:style 样式 js 添加 link str var document css

// 添加 css 脚本
export const loadStyle = url => {
  const link = document.createElement('link');
  link.type = 'text/css';
  link.rel = 'stylesheet';
  link.href = url;
  const head = document.getElementsByTagName('head')[0];
  head.appendChild(link);
};
// 添加 css 片段

为了节省代码和写出更兼容的代码,有时我们需要用Javascript动态的增加CSS样式。

IE下,我们可以使用 document.createStyleSheet() 方法;而在非IE浏览器上,就不支持这个方法。可以使用document.styleSheets[0],但要求网页里必须最少已经加载过一个样式表。

后来我找到以下方法,可以在Firefox、Opera下正常运行:

var str_css = "body {font-size:12px;}";

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

style.type = "text/css";

style.innerHTML = str_css;

document.getElementsByTagName("HEAD").item(0).appendChild(style);

但这种方法却在Safari、Chrome下不可行,原因是style.innerHTML不可写。我再找解决方案,发现用textContent代替innerHTML的方法可行。

最后,我发个原创JS动态增加CSS样式的方法,兼容目前流行的任意浏览器:

function add_css(str_css) { //Copyright @ rainic.com

try { //IE下可行

var style = document.createStyleSheet();

style.cssText = str_css;

}

catch (e) { //Firefox,Opera,Safari,Chrome下可行

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

style.type = "text/css";

style.textContent = str_css;

document.getElementsByTagName("HEAD").item(0).appendChild(style);

}

}
————————————————
版权声明:本文为CSDN博主「hdxx2022」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/hdxx2022/article/details/129499950

标签:style,样式,js,添加,link,str,var,document,css
From: https://www.cnblogs.com/whm-blog/p/17453808.html

相关文章

  • 使用JS来实现tab栏切换
    所以今天我就来把我学的写成文章给大家欣赏一下下HTML部分标题部分<h3>然后导航栏我们使用ulli加a的布局实现然后第二个盒子开始放图片,放图片需要注意路径噢,不然回显示不出来<divclass="tab"><divclass="tab-nav"><h3>每日特价</h3><ul><li><aclas......
  • JVM-常用工具(jps、jstat、jinfo、jmap、jhat、jstack、jconsole、jvisualvm)使用
    场景记录JVM中常用工具。jps:虚拟机进程状态工具jps(JVMProcessStatusTool):虚拟机进程状态工具,可以列出正在运行的虚拟机进程,并显示虚拟机执行主类(MainClass,main()函数所在的类)的名称,以及这些进程的本地虚拟机的唯一ID。命令格式:jps[options][hostid]示例:jps-l 选项:-q 只......
  • json 注意点
    1、特殊符号\n的转换逻辑importjsonx={'test':"测试\n"}#python中的字典结构x_json=json.dumps(x,ensure_ascii=False)x_json#'{"test":"测试\\n"}'这里看上去稍微有一点特殊,本质就是转义json字符串。print(x_json)#{"test&qu......
  • Mapbox样式配置之过滤器表达式
    需求如一个图层,有个属性字段m,值可能有1,2,3,我想等于1和2的时候给红色,等于3的时候给黄色。解决办法在Mapbox中,你可以使用样式表(Style)来配置图层的样式,包括根据属性字段值来设置不同的颜色。以下是一个示例,演示如何根据属性字段m的值设置图层的颜色:{"version":8,"source......
  • 如何使用JavaScript格式化日期 – JS中的日期格式化
    日期是许多JavaScript应用程序的基本组成部分,无论是在网页上显示当前日期还是处理用户输入以安排事件。但以清晰一致的格式显示日期对于积极的用户体验至关重要。在本文中,我们将探讨在JavaScript中格式化日期的各种技术,使您能够以您的应用程序所需的格式显示日期。(前端教程......
  • 为 TortoiseGit 添加 ssh key---运行 TortoiseGit 开始菜单中的 Pageant 程序将ppk私
    TortoiseGit使用扩展名为ppk的密钥,而不是ssh-keygen生成的rsa密钥。使用命令 ssh-keygen-C"邮箱地址"-trsa 产生的密钥在TortoiseGit中不能使用。而基于git的开发必须要用到rsa密钥,因此需要用到TortoiseGit的puttykeygenerator工具来生成既适用于git的......
  • jsocks代理服务器和客户端的试用
    jsocks的项目位于:[url]http://jsocks.sourceforge.net/[/url]在GoogleCode上还有个对应的mirror的项目,是Google创建的,做了一些修改,看来Google是用到了它:[url]http://code.google.com/p/jsocks-mirror/[/url]上面的项目包括SOCKS代理服务器和......
  • 25.后置处理器之JSON提取器
     讲师介绍    黄老师更多讲师课程    7年银行it开发经验1、某大型金融it企业5年柜面系统、自助终端系统、叫号机系统开发经验2、某大型电力系统检测系统1年开发经验3、某大型数据库系统企业1年p2p开发经验01. 程体系导读02.jmeter简介 03.jmeter安装01 04......
  • vue、js onSelect事件 获取选中的值
    https://huaweicloud.csdn.net/639ff5afdacf622b8df90ecc.html?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromBaidu~activity-1-125977595-blog-51669331.235^v36^pc_relevant_default_base3&depth_1-ut......
  • archlinux中如何添加第三方库位置
    现象linux中有部分软件在安装或编译时,并未将需要的库放在标准位置,如:/usr/lib上,导致部分程序不能正确工作。解决办法在/etc/ld.so.conf.d目录下新建xxx.conf文件,这里xxx表示任意的文件名,在其中写入某个库所在的全路径,如:/usr/local/lib,/usr/lib/R/lib等等。然后运行:sudoldconfi......