你的位置:首页 > Java教程

[Java教程]深入理解脚本化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 >测试文字</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 >测试文字</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 >测试文字</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>