深入理解脚本化CSS系列第五篇——动态样式
前面的话
很多时候,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>
深入理解脚本化CSS系列第五篇——动态样式相关推荐
- 深入理解脚本化CSS系列第二篇——查询计算样式
前面的话 元素的渲染结果是多个CSS样式博弈后的最终结果,这也是CSS中的C(cascade)层叠的含义.访问第一篇中的style属性只能获取行间样式,这通常来说,并不是我们想要的结果.本文将详细介绍 ...
- 第17章 脚本化CSS
第17章 脚本化CSS CSS脚本化是网页交互效果的技术基础,使用CSS和JavaScript可以设计网页动画.利用脚本化CSS可以动态地改变HTML属性,如字体颜色.字体大小等,还可以用它设置和改变 ...
- 互联网神经学系列第五篇:研究大脑中的谷歌,脸书和华为思科路由,脑互联网生理学
本文是互联网神经学系列第五篇-"大脑中的类互联网应用和结构,脑互联网生理学" 一.人类大脑研究的困境 大脑的秘密一直是科学皇冠上最明亮的宝石之一,但在两千年前,人们确连它的重要意义 ...
- 【云原生Kubernetes系列第五篇】kubeadm v1.20 部署K8S 集群架构(人生这道选择题,总会有遗憾)
系列文章目录 ??即日起,更新云原生相关知识,喜欢的小伙伴可以给我点个三连喔 ??收录至专栏 云原生 ??[云原生Docker系列第一篇]Docker镜像管理 ??[云原生Docker系列第二篇]Do ...
- 转载 解密蓝牙mesh系列 | 第五篇 【好友(Friend)和低功耗节点(LPN)】【友谊(Friendship)参数】【友谊建立】【友谊(Friendship)消息传送】【安全性】【友谊终止】
YD8801是一款低功耗高性能蓝牙低功耗SOC,集成了高性能2.4GHz射频收发机.32位ARM Cortex-M0处理器.128kB Flash存储器.以及丰富的数字接口.SYD8801片上集成了B ...
- GDB 源码分析系列文章五:动态库延迟断点实现机制
系列文章: GDB 源码分析系列文章一:ptrace 系统调用和事件循环(Event Loop) GDB 源码分析系列文章二:gdb 主流程 Event Loop 事件处理逻辑详解 GDB 源码分析系 ...
- requests 获取div_爬虫系列第五篇 使用requests与BeautifulSoup爬取豆瓣图书Top250
上一篇我们学习了BeautifulSoup的基本用法,本节我们使用它来爬取豆瓣图书Top250. 一.网页分析 我们爬取的网页的url是https://book.douban.com/top250?i ...
- HTML+CSS系列学习 第五篇
HTML+CSS系列学习:重生之我要精通编程语言修仙 第五篇 四十五.b与i标签 四十六.引用标签 四十七.iframe标签 四十八.br与wbr标签 四十九.pre与code标签 五十.map和ar ...
- Python金融系列第五篇:多元线性回归和残差分析
作者:chen_h 微信号 & QQ:862251340 微信公众号:coderpai 第一篇:计算股票回报率,均值和方差 第二篇:简单线性回归 第三篇:随机变量和分布 第四篇:置信区间和假设 ...
最新文章
- C++中substr函数的用法
- Java描述设计模式(21):状态模式
- C#学习笔记_12_枚举结构体
- MATLAB优化编码
- linux下 mysql主从备份
- Hibernate会话工厂
- DDS核心规范-DDS v1.4、DDSI-RTPS、IDL
- linux 下PCIE控制器设备树 学习
- alisql 与mysql_【阿里云资讯】AliSQL 5.6.32 vs MySQL 5.7.15抢鲜测试-阿里云开发者社区...
- 一张图片放两个二维码_经验 | 图片排版的「17个实用技巧」
- 【新手必看】C语言开发环境,请查收!
- 网线插座接法,网线模块制作及其安装步骤(图解)
- 计算机心理学测试题目及答案解析,测量心理学考研重点选择题(含答案)
- html文字超过部分显示为省略号
- CSDN小伙伴们苦苦寻找的最全的微软msdn原版windows系统镜像和office下载地址集锦
- 计算机专业杭州申请公租房有,2018年第四批公租房配租方案及参加摇号名单出炉!报名状况查询方式在此!...
- 网站挂马危害及其防御措施
- 2021-04-29 微信登录简易版
- 2021龙岩一中高考成绩查询,喜报!龙岩这7所一中的高考成绩出炉啦~
- 【VJudge】【Legilimens Contest 1】