前言

最近在写一个扩展右键菜单的插件,既然是插件,想着一步到位,把相关的style样式设置都丢进js文件中,直接加载一个js文件便可以使用该插件,所以今天就研究了下js批量的插入样式的方法,即addSheet(),顺便总结下Javascript中修改样式的4类方法

正文

1、通过js动态的创建style对象

直接贴代码更为方便,这是addCssRule方法,可以一条一条规则的添加到样式表中

var addCssRule = (function () {

    //该方法因为引用了闭包,无论如何都会创建style对象,所以不能做插件使用,需要自己手动修改,目前未进行修改
var createSheet = function () {
var style = document.createElement("style");
document.head.appendChild(style);
//后面写法是为了兼容ie8以下
return style.sheet||style.styleSheet;
}; var sheet = createSheet(); return function(selector,rules,index){
var index=index||0;
if(sheet.insertRules){
sheet.insertRules(selector+"{"+rules+"}",index);
}else{
sheet.addRule(selector,rules,index);
}
} })();

该方法的思路就是,通过创建style,并把style添加到head上,然后返回style的sheet对象,利用sheet对象的insertRule(主流),或者addRule(ie8以下)方法,把样式添加到新建的样式表中。当然,此方法也可以改写成添加到已有的样式表中,而无须另行的创建新的样式表。


上面的方法是手动的每条规则添加一次,而我目前的需求是批量的添加样式,所以需要另寻它法。

下面的这个是addSheet方法

var addSheet=function(styleStr){

    var styleElements=document.getElementsByTagName("style");
if(styleElements.length==0){
if(document.createStyleSheet){
//说明是ie8,注意,ie8的style通过js创建的话必须使用该方法创建
//如果不使用该方法创建,那么通过createElement("style")方法创建的style对象在ie8下,没有对应的cssText方法
document.createStyleSheet();
//通过该方法创建,会自动添加到head中
}else{
//现代浏览器直接使用createElement
var styleE=document.createElement("style");
document.head.appendChild(styleE);
}
} //styleElements是类数组,会自动更新
var styleElement=styleElements[0]; if(styleElement.styleSheet){
//说明ie8
styleElement.styleSheet.cssText+=styleStr;
}else{
var textNode = document.createTextNode(styleStr);
styleElement.appendChild(textNode);
} };

使用实例

addSheet('.dialog{\
width:600px;\
margin:30px auto;\
background-color: #fff;\
box-shadow: 0 3px 9px rgba(0,0,0,0.5);\
font-family: Arial, sans-serif;\
font-size: 13px;\
line-height: 1.4;\
}')

addSheet方法可以批量的插入大量的样式,但是目前的缺点是,由于换行造成了不足,需要手动的在后面加上\解决,所以在实际开发中如果想使用该方法,可以通过网上的工具,把样式进行空格压缩之后作为参数传进来。目前打算是自己写一个node程序撸掉它。


2、使用行内样式

这个方法应该是我们最为熟悉的了,介绍不多

oDiv.style.color="#fff";
oDiv.style.fontSize="14px";

3、使用cssText(注意)

oDiv.style.cssText="color:#fff;font-size:14px;";

在使用该方法时,注意两点,cssText属性会覆盖原来的行内样式,即

<div style="width:100px;"></div>

在使用了

oDiv.style.cssText="color:#fff;font-size:14px;";

之后,原本的样式会被覆盖,变成

<div style="color:#fff;font-size:14px;"></div>

所以,一般我们为了避免行内样式被覆盖,都会这样使用

oDiv.style.cssText+="color:#fff;font-size:14px;";

这样原本的行内样式就不会被覆盖

<div style="width:100px;color:#fff;font-size:14px;"></div>

但是,在ie8之下,却存在一个奇葩的问题

<div style="width:100px;"></div>
console.log(oDiv.style.cssText);

输出结果是这样的width:100px,如果足够细心你会发现,此处的;被剔除了,所以一旦在ie8以下这样使用cssText则会由于分号的原因出现问题

oDiv.style.cssText+="color:#fff;font-size:14px;";

所以为了在ie8以下正常使用需要写个方法加上分号,具体方法这里不写了,后面的参考博客会给出


4、修改class

总共有4类方法修改样式,其他小的不计在这里,最后的一个方法就是通过修改元素的className来实现,这里也给出几个与class相关的参考方法

getClass方法

var getClass=function(ele){
//使用trim方法格式化一次,防止 red blue yellow 这样的情况
//这里的trim方法不可以去除
ele.className=ele.className.trim();
return ele.className.replace(/\s+/g," ").split(" ");
};

hasClass方法

var hasClass=function(ele,cls){
//下面的这行代码是错误的,由于使用的正则匹配中,需要传参匹配,所以无法使用字面量的正则表达式,因为字面量的正则无法传参,只能用于常量,所以此处需要使用构造函数创建正则
//var reg=/\b+cls+\b/g;
//注意此处的\b变成了\\b,因为要进行双重转义,所以原本的元字符\b都要变成\\b这样的形式
//这里的trim方法可以去除
var cls=cls.trim();
var reg=new RegExp("\\b"+cls+"\\b");
return reg.test(ele.className);
};

addClass方法

var addClass=function(ele,cls){
if(!hasClass(ele,cls)) {
//这里的trim方法可以去除
var cls=cls.trim();
ele.className += " " + cls;
}
};

removeClass方法

var removeClass=function(ele,cls){
if(hasClass(ele,cls)){
//这里的trim方法可以去除
var cls=cls.trim();
var reg=new RegExp("\\b"+cls+"\\b");
return ele.className=ele.className.replace(reg,"")
}
};

剩下的这个replaceClass方法懒得写了

var replaceClass=function(ele,nCls,oCls){

};

上述的代码片段都是看了其他大牛博主,然后自己偷懒少写了一部分功能实现的,所以如果想要在实际开发中使用上面的方法请看下面的参考链接拿到源码,毕竟我上面的那些都是为了测试而写的,不完整。

参考链接

司徒正美大神的addSheet方法

http://www.cnblogs.com/rubylouvre/archive/2009/07/14/1523104.html

snandy大牛的关于cssText

http://www.cnblogs.com/snandy/archive/2011/03/12/1980444.html

snandy大牛的addCssRule方法

http://www.cnblogs.com/snandy/p/4867731.html

总结:js中4类修改样式的方法的更多相关文章

  1. js中尺寸类样式

    js中尺寸类样式 一:鼠标尺寸类样式 都要事件对象的配合 Tip:注意与浏览器及元素尺寸分开,鼠标类尺寸样式都是X,Y,浏览器及元素的各项尺寸时Height,Width 1:检测相对于浏览器的位置:e ...

  2. js中cssText批量修改元素样式

    平常编写代码,更改一个元素样式的时候,自己都是用 obj.style.width = "200px"; obj.style.position = "absolute&qu ...

  3. JS中定义类的方法<转>

    转载地址:http://blog.csdn.net/sdlfx/article/details/1842218 PS(个人理解): 1) 类通过prototype定义的成员(方法或属性),是每个类对象 ...

  4. JS中定义类的方法

    JS中定义类的方式有很多种: 1.工厂方式    function Car(){     var ocar = new Object;     ocar.color = "blue" ...

  5. js中的类和对象以及自定义对象

    js中的类 1.类的声明 function Person(name,age){ this.name=name; this.age=age; this.test=function(a){ alert(a ...

  6. koa 基础(十七)原生 JS 中的类、静态方法、继承

    1.app.js /** * 原生 JS 中的类.静态方法.继承 * es5中的类和静态方法 */ function Person(name, age) { // 构造函数里面的方法和属性 this. ...

  7. js中style.display=""无效的解决方法

    本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多 ...

  8. js中判断数据类型的四种方法总结

    js中判断数据类型的四种方法 前言 在js中,我们经常需要判断数据的类型,那么哪些方法可以用来判断数据的类型呢?哪种方法判断数据类型最准确呢? 我们来一个个分析: 1.typeof typeof是一个 ...

  9. js中数组去重的几种方法

    js中数组去重的几种方法         1.遍历数组,一一比较,比较到相同的就删除后面的                 function unique(arr){                 ...

随机推荐

  1. OFbiz--HelloWorld

    上篇博客<OFbiz--简单介绍>我们介绍了OFbiz是什么,以下我们就開始用OFbiz开发我们的第一个程序--HelloWorld. 过程例如以下: 首先在hot-deploy下新建文件 ...

  2. EJB3.0开发环境的搭建

    EJB Container的介绍SUN公司正式推出了EJB的规范之后,在众多的公司和开发者中引起了非常大的反响.标志着用Java开发企业级应用系统将变的非常easy.很多公司都已经推出了或正打算EJB ...

  3. 使用JQuery插件,排序Gridview的某个字段

    1. 前台代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server" ...

  4. Visual Studio Tools for Unity安装及使用

    Visual Studio Tools for Unity安装及使用 转载自:CSDN 晃了一下,10.1到现在又过去两个月了,这两个月什么也没有学,整天上班下班,从这周末开始拾起unity,为了年后 ...

  5. MongoDB Linux下的安装和启动(转)

    1. 下载MongoDB,此处下载的版本是:mongodb-linux-i686-1.8.1.tgz.tar. http://fastdl.mongodb.org/linux/mongodb-linu ...

  6. VS2008非托管C++调用wcf(WebService)服务

    在Visual Studio 2008以及以后版本中,微软停止了非托管C++的直接WebService引用.不过ATL Server代码已经托管到开源网站上,我们可以找到ATL Server的源代码, ...

  7. 红帽系列linux自行配置本地yum源

    yum是红帽系列的一种包管理工具,能方便的自动解决安装包的依赖关系.以前用rpm包管理安装gcc时,rpm -ivh gcc.rpm ,一般会提示要安装gcc需要安装某某lib库,等你找到那个库的rp ...

  8. javascript 关闭页面提示

    window.onbeforeunload = function (e) { e = e || window.event; // For IE and Firefox prior to version ...

  9. NET Core,你必须了解无处不在的“依赖注入”

    NET Core,你必须了解无处不在的“依赖注入” ASP.NET Core的核心是通过一个Server和若干注册的Middleware构成的管道,不论是管道自身的构建,还是Server和Middle ...

  10. QT设置前景图位置(配色简单漂亮)

    QPushButton { background-image: url(:/Resources/green_click.png); image: url(:/Resources/toolsbutton ...