深入理解脚本化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>
复制代码

posted @   小火柴的蓝色理想  阅读(1819)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
点击右上角即可分享
微信分享提示
显示目录
目录
[1]外部样式[2]内部样式[3]兼容写法