推广技术

当前位置：地方网站工作室 >> 网络技术 >> 推广技术 >> 浏览文章

再谈动态添加样式规则

文章来源：菏泽网站建设　　文章作者：cnblogs　　日期：2009年09月04日
以前我就是一篇博文 就给出一个好用的函数，它在我几篇博文中被广泛运用的。最近看了不少东西，于是便有了这篇博文，以梳理我学到的新东西。

还有几个生不逢时的方法：

nsertRule（rule，index）： 添加一条样式规则。

deleteRule（index）： 移除一条样式规则。

getPropertyValue（propertyName） 获取元素相应样式属性的值。如我们获得一个样式规则对象，可以利用CSSStyleRuleObject. getPropertyValue（“color”）获得其字体颜色的设置。与普通的el.style.color的方法相比，其效率相当高，因为el.style.color获取的是内联样式，像IE那样的怪胎，如果你的元素没有设置style属性，根本无法得到准备的值，可能为空，可能是inhert……可能还有兼容问题，而且这内联属性不一定是最终应用于元素的样式，IE只有调用不那么废物的el.currentStyle［prop］，其他浏览器就调用相当争气但有点麻烦的document. defaultView. getComputedStyle（el， “”）［prop］。

removeProperty（propertyName） 移除元素相应样式属性。

setProperty（propertyName，value，priority）设定元素添加一个样式，还能指定优先级。

我们可以弄一个设定样式的函数出来：

以下为引用的内容：

var hyphenize =function(name){ 
  return name.replace( /([A-Z])/g, "-$1" ).toLowerCase();
}    
var capitalize = function(prop){ 
  return prop.replace(/\b[a-z]/g, function(match){ 
    return match.toUpperCase(); 
  });
} 
var setStyle = function(el, styles) { 
  for (var property in styles) { 
    if(!styles.hasOwnProperty(property)) continue; 
    if(el.style.setProperty) { 
      //必须是连字符风格，el.style.setProperty('background-color','red',null); 
      el.style.setProperty(hyphenize(property),styles[property],null);       
    } else { 
      //必须是驼峰风格，如el.style.paddingLeft = "2em" 
      el.style[camelize(property)] = styles[property] 
    } 
  } 
  return true;
}

使用方法：

以下为引用的内容：

setStyle(div,{ 
     'left':0, 
     'top':0, 
     'line-height':'2em',
     'padding-right':'4px'
});

不过我非常不喜欢这方法，生成的是内联样式，它还得特殊处理float与opacity。在IE7的内联样式中，滤镜还有一个Bug，一定要让其得到hasLayout，要不滤镜就不会生效（我们可以通过el.currentStyle.hasLayout查看其状况）。因此，如其一个个设置，不如用cssText一网打尽。

最后附上我的加强版addSheet方法。它增添自动处理opacity的功能，也就是说我们只需要按标准设置cssText，它会自动生成相应的滤镜，这样一来至少让火狐等浏览器通过W3C的校检。

以下为引用的内容：

var addSheet = function(){

  var doc,cssCode;
  if(arguments.length == 1){
    doc = document;
    cssCode = arguments[0]
  }else if(arguments.length == 2){
    doc = arguments[0];
    cssCode = arguments[1];
  }else{
    alert("addSheet函数最多接受两个参数!");
  }
  if(!+"\v1"){//新增功能，用户只需输入W3C的透明样式，它会自动转换成IE的透明滤镜
    var t = cssCode.match(/opacity:(\d?\.\d+);/);
    if(t!= null){
      cssCode = cssCode.replace(t[0], "filter:alpha(opacity="+ parseFloat(t[1]) * 100+");");
    }
  }
  cssCode = cssCode + "\n";//增加末尾的换行符，方便在firebug下的查看。
  var headElement = doc.getElementsByTagName("head")[0];
  var styleElements = headElement.getElementsByTagName("style");
  if(styleElements.length == 0){//如果不存在style元素则创建
    if(doc.createStyleSheet){    //ie
      doc.createStyleSheet();
    }else{
      var tempStyleElement = doc.createElement('style');//w3c
      tempStyleElement.setAttribute("type", "text/css");
      headElement.appendChild(tempStyleElement);
    }
  }
  var styleElement = styleElements[0];
  var media = styleElement.getAttribute("media");
  if(media != null && !/screen/.test(media.toLowerCase()) ){
    styleElement.setAttribute("media","screen");
  }
  if(styleElement.styleSheet){    //ie
    styleElement.styleSheet.cssText += cssCode;//添加新的内部样式
  }else if(doc.getBoxObjectFor){
    styleElement.innerHTML += cssCode;//火狐支持直接innerHTML添加样式表字串
  }else{
    styleElement.appendChild(doc.createTextNode(cssCode))
  }
}

追求卓越 精心缔造 菏泽网站建设 地方网络工作室
上一篇：五个实用设计技巧
下一篇：35网站首页全方位优化过程分享
相关文章

我们能为菏泽企业做什么？

菏泽企业网站建设
DIV+CSS布局技术、底层SEO规划设计、菏泽地方网络工作室为您提供优质网站建设服务！
SEO网站推广策划
菏泽唯一SEOwhy认证的SEOER，全面的SEO推广方案，为您量身定制SEO网站推广策划！
国内顶级服务器
新网互联、中国频道、美国主机、韩国主机、地方网络工作室只提供最优质的服务器主机！
《书生商友》商机群发软件
Booksir，一步到位彻底解决中小企业网络整合营销的书生商友营销引擎!

公告

怎么联系我们？

手机：18651363941
地址：由于菏泽生存压力巨大，本人现未居菏泽，在北京就值。如有业务需要，请直接电联。
联系人：刘峰　高娜
QQ：61572536
微信：61572536
邮箱：guf521@163.com

服务宗旨

因为执着　所以专业　追求卓越　精心缔造
售后为先　宁得罪新客户　　不拖拉老客户
诚信为本　新互顶级域名空间　　畅爽速度