深入理解脚本化CSS系列第五篇——动态样式
![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAoklEQVQ4T+2T4Q2CMBCFv27CBjgCG+gIjAAbOAIjOIJs4Ai6gRvIBpjXXCOp19T/8pJLoTneXcj3Ah91wAV4bu68xwXoAZ2EzEAmE9AWTB6AelRDyaAx9zgh0wE4ATczcTdIE7wl0oe7wX/8RMHigfQTB3fDdM1IEvYyONdIVEOSqDwCY2Z2NaS/UNbqMSQmvauUPlfbNKpBSdTUVyXSs/XyBlRCNBG20I28AAAAAElFTkSuQmCC)
前面的话
很多时候,DOM操作比较简单明了,因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦。但由于浏览器充斥着隐藏的陷阱和不兼容问题,处理DOM中的某些部分时要复杂一些,比如动态样式就相对较复杂
所谓动态样式,是指在页面加载时并不存在,在页面加载完成后动态添加到页面的样式
动态样式包括两种情况:一种是通过<link>元素插入外部样式表,另一种是通过<style>元素插入内部样式。下面将详细介绍这两种情况
外部样式
/*style.css里面的内容*/ .box{height:100px;width:100px;background-color: pink;}
var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.href = "style.css"; var head = document.getElementsByTagName('head')[0]; head.appendChild(link);
使用函数封装如下:
<div class="box">测试文字</div> <button id="btn">动态添加样式</button> <script> function loadStyles(url){ loadStyles.mark = 'load'; var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.href = url; var head = document.getElementsByTagName('head')[0]; head.appendChild(link); } btn.onclick = function(){ if(loadStyles.mark != 'load'){ loadStyles("style.css"); } } </script>
内部样式
var style = document.createElement("style"); style.type = "text/css"; style.innerHTML = ".box{height:100px;width:100px;background-color: pink;}"; var head = document.getElementsByTagName('head')[0]; head.appendChild(style);
使用函数封装如下:
<div class="box">测试文字</div> <button id="btn">动态添加样式</button> <script> function loadStyles(str){ loadStyles.mark = 'load'; var style = document.createElement("style"); style.type = "text/css"; style.innerHTML = str; var head = document.getElementsByTagName('head')[0]; head.appendChild(style); } btn.onclick = function(){ if(loadStyles.mark != 'load'){ loadStyles(".box{height:100px;width:100px;background-color: pink;}"); } } </script>
[注意]该方法在IE8-浏览器中报错,因为IE8-浏览器将<style>视为当作特殊的节点,不允许访问其子节点或设置innerHTML属性
兼容写法
动态插入内部样式时,存在兼容问题,下面有两种兼容处理办法
兼容一
IE浏览器支持访问并修改元素的CSSStyleSheet对象的cssText属性,通过修改该属性可实现类似效果
<div class="box">测试文字</div> <button id="btn">动态添加样式</button> <script> function loadStyles(str){ loadStyles.mark = 'load'; var style = document.createElement("style"); style.type = "text/css"; try{ style.innerHTML = str; }catch(ex){ style.styleSheet.cssText = str; } var head = document.getElementsByTagName('head')[0]; head.appendChild(style); } btn.onclick = function(){ if(loadStyles.mark != 'load'){ loadStyles(".box{height:100px;width:100px;background-color: pink;}"); } } </script>
兼容二
作用域元素是微软自己的一个定义,一般来说页面中看到的元素是有作用域的元素,页面中看不到的元素就是无作用域的元素
在IE8-浏览器中,<style>元素是一个没有作用域的元素,如果通过innerHTML插入的字符串开头就是一个无作用域的元素,那么IE8-浏览器会在解析这个字符串前先删除该元素
所以,下面这段代码是无效的
div.innerHTML = '<style>div{height:100px;}</style>';
于是,可以通过增加一个'_'文本节点,然后再删除使之有效
div.innerHTML = "_<style>div{height:100px;}</style>"; div.removeChild(div.firstChild);
<div class="box">测试文字</div> <button id="btn">动态添加样式</button> <script> function loadStyles(str){ loadStyles.mark = 'load'; var div = document.createElement("div"); div.innerHTML = '_' + '<style>' + str+'</style>'; div.removeChild(div.firstChild); var head = document.getElementsByTagName('head')[0]; head.appendChild(div.firstChild); div = null; } btn.onclick = function(){ if(loadStyles.mark != 'load'){ loadStyles(".box{height:100px;width:100px;background-color: pink;}"); } } </script>
好的代码像粥一样,都是用时间熬出来的
![二维码](https://pic.xiaohuochai.site/blog/qrcode.jpg)
标签:
javascript总结
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
· SQL Server统计信息更新会被阻塞或引起会话阻塞吗?
· C# 深度学习框架 TorchSharp 原生训练模型和图像识别
· 这或许是全网最全的 DeepSeek 使用指南,95% 的人都不知道的使用技巧(建议收藏)
· 拒绝繁忙!免费使用 deepseek-r1:671B 参数满血模型
· 本地搭建DeepSeek和知识库 Dify做智能体Agent(推荐)
· Sdcb Chats 重磅更新:深度集成 DeepSeek-R1,思维链让 AI 更透明!
· DeepSeek-R1本地部署如何选择适合你的版本?看这里