js获取类名的3种方法-教你js对象删除某个元素

本文章为《网页前端开发Javascript视频》教学课件。请相互配合师哥的Javascript在线课程学习培训。

JavaScript还可以为CSS程序编写，这称为脚本制作化CSS；根据撰写CSS脚本制作，还能够完成一系列的视觉冲击。

HTML中界定款式有三种方法:包含根据元素定义外界css样式表文档，应用元素定义置入款式，应用款式特性界定特殊属性的内联样式；

DOM2设计风格控制模块紧紧围绕这三种运用设计风格体制给予了一套API，能够检验电脑浏览器适用DOM2界定的CSS的工作能力。

var supportsDOM2CSS = document.implementation.hasFeature("CSS","2.0");var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2","2.0");

脚本制作嵌入款式:

撰写CSS脚本制作非常简单，最立即的办法便是更改文本文档原素的款式特性。一切适用款式特点的HTML原素在Javascript上都有相对的款式特性。此款式特性是独特的。它并不是一个字符串数组，反而是一个CSSStyleDeclaration目标，它包括HTML的款式特点所特定的任何款式信息内容，但不包含从外界css样式表或置入css样式表中阵列的款式。

var mydiv = document.getElementById("mydiv");console.log(mydiv.style); // CSSStyleDeclarationmydiv.style.fontSize = "24px";mydiv.style.color = "purple";

做为一个CSSStyleDeclaration目标，style表明一个内联样式，它储存全部款式特性。可是，假如原素沒有设定款式特性或是沒有应用脚本制作来设定它，则style中的款式特性值全是空字符串。

只需获得合理的DOM原素引入，就可以随便应用Javascript设定其款式。

var myDiv = document.getElementById("myDiv");myDiv.style.backgroundColor = "red";myDiv.style.width = "100px";myDiv.style.height = "200px";myDiv.style.border = "1px solid black";

以这类方法变更款式时，原素的外型将自动升级。

根据style目标，还能够获得style特性中特定的款式；

var mydiv = document.getElementById("mydiv");console.log(mydiv.style.backgroundColor);console.log(mydiv.style.width);console.log(mydiv.style.height);

脚本制作化CSS特性的名字合值:

款式特性中特定的一切CSS特性都将表明因此款式目标的相匹配特性；含有破折号的CSS特性名务必先转化成骆驼峰英文大小写，随后才可以根据js浏览，比如:

特性CSS JS特性background-image style . background imagecolorstyle . color display style . display font-family style . font family。

在绝大多数状况下，变换可以经过简易地变换特性名字的文件格式来完成。可是，假如css属性名是Javascript中的保留字或关键词，请在它前边再加上“CSS”，比如float特性。因为float是JS中的保留字，因此不可以做为特性名应用，其值应是cssflow低版IE适用styleFloat；

mydiv.style.backgroundColor = "purple";mydiv.style.borderRightStyle = "solid";mydiv.style.borderRightColor = "green";mydiv.style.cssFloat = "left";mydiv.style.styleFloat = "left";

当根据CSSStyleDeclaration目标设定款式特性值时，该值应该是一个字符串数组，而且应当放到没有分号的冒号中。

在标准模式下，全部精确测量值务必特定一个测量单位。在混合模式下，能够省去企业；

mydiv.style.width = 300; // 不正确，但在掺杂方式下默认设置为300pxmydiv.style.width = "300"; // 不正确，但在掺杂方式下默认设置为300px

测算获得的值也需要在末尾再加上企业；

var x = 10, leftMargin=20, leftBorder=10;mydiv.style.left = (x leftMargin leftBorder) "px";

这一企业唯一不太好的地区是，假如你想要这一值，你能参加别的的数学运算。由于是字符串数组，因此不可以立即应用。您需要先将其变换为标值，随后才可以参加实际操作。比如，能够应用parseInt()或parseFloat()来变换它。

var rect = mydiv.getBoundingClientRect();console.log(rect);var borderWidth = parseFloat(mydiv.style.width);console.log(borderWidth);

有一些CSS特性是复合型特性，例如:行高是页边距上，页边距右，页边距下，页边距左的复合型特性；CSSStyleDeclaration目标也是有相对应的复合型特性；

mydiv.style.margin = "20px 30px 40px 50px";mydiv.style.marginTop = "50px";mydiv.style.marginLeft = "50px";

设定复合型特性行高时，会全自动测算其相应的关系特性；

换句话说，款式是原素的一个特点，因此还可以根据setAttribute()，getAttribute()等来设定款式特点。

mydiv.setAttribute("style","width: 300px; height:200px; background-color: purple;");console.log(mydiv.style);console.log(mydiv.getAttribute("style"));

款式目标的特性和方式:

款式目标中还界定了一些特性和方式，不但能够给予原素的款式特性值，还能够改动款式。

CssText:能够在款式作用中浏览CSS编码；

长短:运用于原素的CSS特性的总数；

ParentRule:表明CSS信息内容的CSSRule目标；

getpropertycsvalue(property name):回到包括给出特性的值CSSValue目标；已被丢掉；

getPropertyPriority(特性名)；假如选用了给出的特性！关键的被设定，那麼关键的被回到；不然，回到空字符串；

GetPropertyValue(propertyName):回到给出特性的值；

Item(index):回到给出部位处CSS特性的名字；

RemoveProperty(propertyName):从款式中清除给出特性；

设定特性(特性名字，值，优先):将给出特性设定为特性值，并加上优先标示(“关键”或a 空字符串)；

CssText特性:回到款式特性中CSS编码的电脑浏览器內部表明方式。在载入方式下，分派给cssText的值将遮盖全部款式特性的值。

mydiv.style.cssText = "width: 300px; height:200px; background-color: purple;";console.log(mydiv.style.cssText);console.log(mydiv.getAttribute("style"));

设定cssText特性的效果是将好几个CSS特点迅速运用到原素中，全部的变更都能够一次运用。

Item()方式和length特性:设计方案length特性的效果是与item()方式一起应用，迭代更新原素中界定的CSS特性名；当应用length和item()时，style目标事实上是一个结合，因而能够应用方括号而不是item()来获得给出部位的css属性名。

console.log(mydiv.style.length);for(var i=0; i

方式:获得给出特性的值；

console.log(mydiv.style.getPropertyValue("background-color"));for(var i=0; i

Getpropertycsvalue(property name)方式:该方式回到一个包括2个特性的CSSValue目标，即cssText和cssValueType，在其中cssText特性与getpropertycsvalue()方式回到的值同样，而cssValueType特性是一个数据变量定义，表明值的种类:0表明承继值，1表明基本上值，2表明值目录，3表明自定。

var value = mydiv.style.getPropertyCSSValue("background-color");console.log(value);console.log(value.cssText);console.log(value.cssValueType);

这一方式早已被放弃了，基本上任何的电脑浏览器都不兼容。

getPropertyPriority(特性名)；假如选用了给出的特性！关键的被设定，那麼关键的被回到；不然，回到空字符串；

console.log(mydiv.style.getPropertyPriority("background-color")); // important

设定特性(特性名字，值，优先):给出特性设定为带优先标示的特性值，优先可选(“关键”或a 空字符串)；

mydiv.style.setProperty("background-color","purple","important");

removeProperty(propertyName)方式:一个CSS特性能够从原素的款式中清除，清除一个特性代表着默认设置款式将运用于该特性(它是以别的css样式表层叠而成的)；

mydiv.style.removeProperty("background-color");

ParentRule:写保护，表明CSS信息内容的CSSRule目标；

var rule = mydiv.style.parentRule;console.log(rule); // null

测算款式:

尽管style目标能够给予款式特点的任何款式信息内容，但它不包含从别的css样式表中层叠并危害当今原素的具体款式信息内容。因而，必须应用测算款式；

测算款式是一组特性值，由电脑浏览器根据将内联样式与全部连接css样式表中全部使用的款式标准(即展现原素时具体应用的一组特性)紧密结合来导出来(测算)；

GetComputedStyle()方式:

方式是window目标的方式，可由window.getComputedStyle()或document.defaultView . getcomputed style()启用，document . default view的传参为window；

方式接纳2个主要参数:获得测算款式的原素和伪元素字符串数组(如::after)；假如不用伪元素，第二个主要参数能够是null或空字符串；方式回到一个CSSStyleDeclaration目标，该目标与style特性具备同样的种类，仅仅它是可读写的，而且包括当今原素的全部测算款式；

#mydiv{background-color: purple; width: 100px; height: 100px;}mydivvar mydiv = document.getElementById("mydiv");var computedStyle = document.defaultView.getComputedStyle(mydiv,null);console.log(computedStyle);console.log(computedStyle.backgroundColor);console.log(computedStyle.width);console.log(computedStyle.height);console.log(computedStyle.border);

留意:上边的外框特性很有可能不容易回到具体的外框标准(比如IE和Firefox回到空 string)，由于在不一样的访问中表述复合型特性的方法是不一样的，由于设定这一特性事实上包含许多其它的特性，例如:外框，它事实上是融洽四边的外框总宽和色调，因此外框不容易回到，可是computedStyle.borderleftWidth会传参；

console.log(computedStyle.borderLeftWidth);console.log(computedStyle.borderLeftColor);

除此之外，不一样的电脑浏览器将会会以不一样的方法表述值。

测算款式还包括归属于电脑浏览器內部css样式表的款式信息内容，因而一切含有初始值的CSS特性都是会表明在预估款式中；例如由此可见性特性有初始值，有的浏览器为由此可见，有的设定为承继；；

用以测算款式的CSSStyleDeclaration目标和用以表明内联样式的目标中间有一些关键的差别:

测算款式的特性是可读写的；

测算款式的数值平方根，百分数，点等相对性企业都将变换为平方根。全部用户的规格(如外界行高尺寸和文字大小)都是有一个以清晰度为公司的值。有关色调的特性将以rgb(#，#，#)或rgba(#，#，#，#)的文件格式回到；

复合型特性不测算，他们只根据最主要的特性，比如，不查看行高特性，反而是应用marginLeft或marginTop等。

测算款式的cssText特性未定义(即回到字符串数组空)；

测算款式和内联样式能够一起应用；

// 用自定义的因素放缩原素e的文字规格function scale(e, factor){ // 用测算款式查看当今文字的规格 var size = parseInt(window.getComputedStyle(e,").fontSize); // 用内联样式来变大规格 e.style.fontSize = factor * size "px";}// 用自定义的因素改动原素的背景色// factors > 1 色调变淡，factors < 1色调发暗function scaleColor(e, factor){ var color = window.getComputedStyle(e,").backgroundColor; var components = color.match(/[\d\.] /g); // 分析r，g，b份量 for(var i=0; i

在IE的较低版中不兼容getComputedStyle()方式，但它有相似的定义。在IE中，有款式特性的原素也是有currentStyle特性，它是CSSStyleDeclaration的一个案例，包括当今原素的全部测算款式，但只受IE适用；

var computedStyle = mydiv.currentStyle;console.log(computedStyle.backgroundColor);console.log(computedStyle.width);console.log(computedStyle.height);console.log(computedStyle.borderLeftWidth);

兼容作用:

function getStyle(obj, attr){ if(window.getComputedStyle) return getComputedStyle(obj, null)[attr]; else return obj.currentStyle[attr];}var mydiv = document.getElementById("mydiv");var backgroundColor = getStyle(mydiv, "background-color");console.log(backgroundColor); // rgb(245, 222, 179)// 或是function getCss(obj, css){ return (document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(obj,null) : obj.currentStyle)[css];}var borderTopWidth = getCss(mydiv, "border-top-width");console.log(borderTopWidth); // 1px

封裝一个公式来获得CSS特性值，比如:

function getComputedStyles(elem,prop) { var cs = window.getComputedStyle(elem,null); if (prop) { console.log(prop " : " cs.getPropertyValue(prop)); return; } var len = cs.length; for (var i=0;i

与虚似原素一起应用:getComputedStyle能够从虚似原素中获取款式信息内容(比如::::after:，:before:，:marker:，:line-marker)；

#mydiv::after{content: "大师兄王唯";}var mydiv = document.getElementById("mydiv");var computedStyle = document.defaultView.getComputedStyle(mydiv,":after");console.log(computedStyle.content);

原素的多少规格和部位能够根据应用计算款式来得到，可是得到的結果不一定是大家所期待的。这时，我们可以应用getBoundingClientRect()，传参与3D渲染实际效果一致。

console.log(computedStyle.left); // autoconsole.log(computedStyle.top); // autoconsole.log(computedStyle.width); // 300px// left:8 top:8 width:302，包含了bordervar rect = mydiv.getBoundingClientRect();console.log(rect);

脚本制作化的CSS类:

您还可以撰写原素的类特性的脚本制作。变更原素的类会变更用于该原素的一组css样式表选择符，这能够与此同时变更好几个CSS特性。

类名特性:

相匹配原素的类特性，即是原素特定的CSS类；类是ECMAScript中的保留字，因此应用className在Javascript中；

实际操作类名时，必须根据className特性加上，删掉和更换类名。

var mydiv = document.getElementById("mydiv");mydiv.className = "container"; // 设定mydiv.className = "; // 删掉mydiv.className = "other"; // 更换// 或if(mydiv.className == "){ mydiv.className = "container";}

原素能够设定好几个CSS类，它的className储存好几个类名的字符串数组，因此即便只改动了字符串数组的一部分，前边的值也会被遮盖，因此每一次都务必设定全部字符串数组的值；

var mydiv = document.getElementById("mydiv");console.log(mydiv.className); // db user disablemydiv.className = "container";console.log(mydiv.className); // container

假如只想要从类中删掉一个类名，则必须溶解好多个类名，删掉不用的一个，随后将别的类名拼出一个新字符串数组，比如:

// 如，删掉user类// 最先，获得类名字符串数组并拆分为二维数组var mydiv = document.getElementById("mydiv");var classNames = mydiv.className.split(/\s /);// 寻找要删的类名var pos = -1, i, len;for(i=0, len = classNames.length; i

假如要加上类名，能够同时根据拼凑字符串数组来完成，可是在安装以前一定要查验好不容易数次加上同一个类名；

Element.classList特性:

HTML5提升了一种新的实际操作类名的方法，能够让实际操作更简易更安全性，那便是classList特性，它是一个DOMTokenList目标，它是一个写保护的类二维数组目标。与别的DOM结合相近，它也有一个长短特性，标示它包括是多少原素。要获得每一个原素，能够应用item()方式或方括号英语的语法。除此之外，这类新种类还界定了下列方式:

add(value)：将给出的字符串数组值加上到目录中，假如值存有，也不加上；contains(value)：表明目录中是不是存有给出的值，假如存有回到true，不然，回到false；remove(value)：从目录中删掉给出的字符串数组；toggle(value)：假如目录中早已存有给出的值，删掉它，不然，加上它；console.log(mydiv.classList); // DOMTokenListmydiv.classList.add("container");mydiv.classList.remove("container");

ClassList能够确保别的类名不会受到这类改动的危害，能够大幅度降低相近操作过程的复杂性。

mydiv.classList.toggle("user"); // 转换user类// 明确原素中能否包括明确的类名if(mydiv.classList.contains("bd") && !mydiv.classList.contains("disabled")){ // To Do }// 迭代更新类名for(var i=0,len=mydiv.classList.length; i

应用classList特性，除非是必须删掉全部类名或彻底调用原素的class属性，不然不用className。

能够确实的是，classList是一个DOMTokenList目标，它是即时的。假如类名特性更改，它将被立即升级。一样，假如类目录产生变化，类名特性也会立即升级。

IE9下列的电脑浏览器不兼容classList特性，能够自定一个CSSClassList类来仿真模拟DOMTokenList目标的方式；

function classList(e){ // 下列二行先注解，不然后边的toArray默认设置启用的是DOMTokenList目标的的toArray，而它并不会有 // 或是拓展内嵌的DOMTokenList的toArray // if(e.classList) return e.classList; // 假如e.classList存有，则回到它 // else return new CSSClassList(e); // 不然，说仿冒一个 return new CSSClassList(e);}// CSSClassList是一个仿真模拟DOMTokenList的目标function CSSClassList(e) { this.e = e;}// 假如e.className包括类名c则回到true，不然回到falseCSSClassList.prototype.contains = function(c){ // 查验c是不是合理合法的类名 if(c.length === 0 || c.indexOf(" ") != -1) throw new Error("Invalid class name: '" c "'"); // 最先是常规体检 var classes = this.e.className; if(!classes) return false; // e没有类名 if(classes === c) return true; // e有一个彻底配对的类名 // 不然，把c本身看作一个英语单词，运用正则表达式检索c return classes.search("\\b" c "\\b") != -1;};// 假如c不会有，将c加上到e.className中CSSClassList.prototype.add = function(c){ if(this.contains(c)) return; // 假如存有，哪些都不做 var classes = this.e.className; if(classes && classes[classes.length - 1] != " ") c = " " c; // 假如必须加一个空格符 this.e.className = c; // 将c加上到className中};// 将在e.className中产生的全部c都删掉CSSClassList.prototype.remove = function(c){ if(c.length === 0 || c.indexOf(" ") != -1) throw new Error("Invalid class name: '" c "'"); // 将全部做为英语单词的c和不必要的跟随空格符全删 var pattern = new RegExp("\\b" c "\\b\\s*", "g"); this.e.className = this.e.className.replace(pattern, ");};// 假如c不会有，将c加上到e.className中，并回到true// 不然，将e.className中产生的全部c都删掉,并回到falseCSSClassList.prototype.toggle = function(c){ if(this.contains(c)){ // 假如e.className包括类名c thsi.remove(); // 删掉它 return false; }else{ this.add(c); // 加上 return true; }};// 回到e.className本身CSSClassList.prototype.toString = function(){ return this.e.className;};// 回到在e.className中的类名CSSClassList.prototype.toArray = function(){ return this.e.className.match(/\b\w \b/g) || [];};// 运用var mydiv = document.getElementById("mydiv");var ccl = classList(mydiv);console.log(ccl);console.log(ccl.contains("newsdiv")); // trueccl.add("topDiv");ccl.remove("newsdiv");ccl.toggle("newsdiv");console.log(ccl.toString());console.log(ccl.toArray());

脚本制作css样式表:

撰写css样式表脚本制作时，应用二种种类的目标:

第一类是原素目标，包含原素包括的css样式表和原素中界定的css样式表。这两个原素是常用的文本文档原素，各自由HTMLLinkElement和HTMLStyleElement种类表明。他们能够改动原素的特点。假如他们有id，能够根据getEleementById()得到。

// var mylink = document.getElementById("mylink");var mylink = document.getElementsByTagName("link")[0];console.log(mylink);var mystyle = document.getElementsByTagName("style")[0];console.log(mystyle);

全部电脑浏览器都将包括由rel特性设定为css样式表的设计引进的原素和css样式表；

第二种形式是CSScss样式表，它意味着css样式表自身。类二维数组StyleSheetList目标的写保护结合根据document.styleSheets属性回到，该特性具备length特性和item()方式。CSScss样式表阿里云oss在结合中，表明与文本文档关系的css样式表。

var styleList = document.styleSheets;console.log(styleList); // StyleSheetListconsole.log(styleList.length); // 3console.log(styleList[0]); // CSSStyleSheet// 解析xmlvar sheet = null;for(var i=0, len=document.styleSheets.length; i

您能够同时根据HTMLLinkElement()或HTMLStyleElement()原素的Sheet特性获得CSScss样式表目标；IE的较低版不兼容sheet，但给予了一个具备同样实际效果的css样式表特性；

var mylink = document.getElementById("mylink");var mylink = document.getElementsByTagName("link")[0];console.log(mylink.sheet); // CSSStyleSheetconsole.log(mylink.styleSheet); // 在低版的IE中回到CSSStyleSheetvar mystyle = document.getElementsByTagName("style")[0];console.log(mystyle.sheet); // CSSStyleSheetconsole.log(mystyle.styleSheet); // 在低版的IE中回到CSSStyleSheet

兼容解决:

function getStyleSheet(element){ return element.sheet || element.styleSheet;}var link = document.getElementsByTagName("link")[0];var sheet = getStyleSheet(link);console.log(sheet.href);

应用前，查验电脑浏览器是不是适用DOM2css样式表。

var supportsDOM2StyleSheet = document.implementation.hasFeature("StyleSheets","2.0");

CSScss样式表目标:

插口表明一个CSScss样式表，并容许您定期检查编写css样式表中的标准目录；它承继自css样式表插口，css样式表插口能够作为界定非CSScss样式表的基本上插口。从插口承继的特性如下所示:

Disabled:布尔值，标示css样式表是不是被禁止使用，r/w .将该值设定为true能够禁止使用css样式表；

var styleList = document.styleSheets;var ss = styleList[2];console.log(ss.disabled);ss.disabled = true; // 原素的款式无效// 封裝一个小涵数，用于打开或关掉css样式表// 假如传送一个数据，将其作为document.styleSheets目标中一个数据库索引// 假如传送一个字符串数组，将其作为CSS选择符并传送给document.querySelectorAll()function disableStyleSheet(ss){ if(typeof ss === "number") document.styleSheets[ss].disabled = true; else{ var sheets = document.querySelectorAll(ss); for(var i=0; i

Href:假如css样式表是根据包括的，则它是css样式表的URL，不然为null；

Media:当今css样式表适用的全部新闻媒体种类的MediaList类二维数组的结合；像全部DOM结合一样，这一结合有一个长短特性和一个item()方式。假如结合为空，则表明css样式表合适全部新闻媒体。

.container{width:300px;height:200px;background-color: salmon;}var styleList = document.styleSheets;var ss = styleList[2];console.log(ss.media); // MediaListconsole.log(ss.media.length); // 2console.log(ss.media[0]); // screen and (min-width:500px)console.log(ss.media.item(1)); // tv and (max-width:1000px)

MediaList目标还有一个mediaText特性，它回到原素的媒介特性值；

console.log(ss.media.mediaText);

MediaList目标有appendMedium(新闻媒体)和delete media()方式，各自做为加上和删掉新闻媒体应用。

ss.media.appendMedium("print");ss.media.deleteMedium("tv and (max-width:1000px)");

一般来说，新闻媒体特性非常少被控制；

OwnerNode:偏向有着当今css样式表的连接点的表针。css样式表很有可能早已以HTML方式传送或导进。假如css样式表是由别的css样式表根据@import导进的，则特性数值null，这也是初期版本号的ie所不兼容的；

console.log(styleList[0].ownerNode); // linkconsole.log(styleList[1].ownerNode); // style

currentcss样式表:当根据@import导进当今css样式表时，该特性是偏向导进它的css样式表的表针；

// styleList[1]获得的是一个在其中应用@import导进一个CSS文档console.log(styleList[1].cssRules[0]); console.log(styleList[1].cssRules[0].parentStyleSheet); // CSSStyleSheet

文章标题中文章标题特性的值:使用者编码；

Type:表明css样式表种类的字符串数组，针对CSScss样式表为“text/CSS”；

留意:除开禁止使用的特性，全部别的特性全是写保护的；

实际操作css样式表标准:

除开以上全部特性，CSScss样式表种类还界定了一个API用以查看，插进和删掉css样式表标准；

CssRules:回到css样式表中包括的任何款式标准的CSS rules种类的即时结合，该结合中的原素为CSSStyleRule目标；IE的低版不兼容，但有相似的标准特性；

var ss = styleList[1];console.log(ss);console.log(ss.cssRules);console.log(ss.rules); // 是IE专用型console.log(ss.cssRules[0]); // CSSStyleRule

OwnerRule:假如css样式表是根据@import导进的，那麼这一特点便是一个表针，它回到意味着导进标准的CSSImportRule目标；不然，它为null，这也是初期版本号的ie所不兼容的；

InsertRule(标准，数据库索引):建立(插进)一个标准，并将标准字符串数组插进到CSSRules结合中的特定部位。此方式接纳2个主要参数:标准文字和标示标准插进部位的数据库索引；

var sheet = document.styleSheets[1];sheet.insertRule("body{background-color:silver}",0);console.log(sheet.cssRules);

IE的低版适用相近的addRule(选择符，款式，数据库索引)方式，接纳2个首选和一个可选主要参数:选择符和CSS款式信息内容，一个可选主要参数:插进标准的部位；

document.styleSheets[1].addRule("h1","font-size:3em;color:red;",2);console.log(document.styleSheets[1].cssRules);

全部电脑浏览器都适用此方式。

跨电脑浏览器方式:

var sheet = document.styleSheets[0];function insertRule(sheet, selectorText, cssText, position){ if(sheet.insertRule){ sheet.insertRule(selectorText "{" cssText "}", position); }else{ sheet.addRule(selectorText, cssText, position); }}insertRule(sheet, "body", "background-color:silver", 0);

DeleteRule(数据库索引):删掉cssRules结合(css样式表)中特定部位的标准；IE的低版不兼容，但适用相近的removeRule()方式，全部电脑浏览器也都适用。

document.styleSheets[1].deleteRule(0);document.styleSheets[1].removeRule(0);console.log(document.styleSheets[1].cssRules);

跨电脑浏览器方式:

var sheet = document.styleSheets[0];function deleteRule(sheet, index){ if(sheet.deleteRule){ sheet.deleteRule(index); }else{ sheet.removeRule(index); }}deleteRule(sheet,0);

CSSStyleRule标准目标:

CSSStyleRule目标表明css样式表中的每一个标准；承继自CSSRule插口，实际上CSSRule是其他类型承继的基类，最多见的是意味着款式信息内容的CSSStyleRule种类；

var sheet = document.styleSheets[2];var rules = sheet.cssRules || sheet.rules;var rule = rules[0];console.log(rule); // CSSStyleRule

CSSRule插口特性:

cssText：回到成条标准相匹配的文字；低版的IE不兼容parentRule：写保护，假如当今标准是导进的标准，这一特性引入的便是导进标准，不然为null；或此标准是 @media 块中的款式标准, 则父亲标准将是该 CSSMediaRule；IE不兼容parentStyleSheet：当今标准隶属的css样式表，低版的IE不兼容；type：表明标准种类的变量定义值，针对款式标准，数值1；IE不兼容；

这种变量定义是在CSSRule插口中界定的，他们的值是:

时间常数插口

CSSRule.STYLE_RULE1CSSStyleRuleCSSRule.IMPORT_RULE3CSSImportRuleCSSRule.MEDIA_RULE4CSSMediaRuleCSSRule.FONT_FACE_RULE5CSSFontFaceRuleCSSRule.PAGE_RULE6CSSPageRuleCSSRule.KEYFRAMES_RULE7CSSKeyframesRuleCSSRule.KEYFRAME_RULE8CSSKeyframeRule9 保存供未来应用CSSRule.NAMESPACE_RULE10CSSNamespaceRuleCSSRule.COUNTER_STYLE_RULE11CSSCounterStyleRuleCSSRule.SUPPORTS_RULE12CSSSupportsRuleCSSRule.DOCUMENT_RULE13CSSDocumentRuleCSSRule.FONT_FEATURE_VALUES_RULE14CSSRule.VIEWPORT_RULE15CSSViewportRuleCSSRule.REGION_STYLE_RULE16CSSRegionStyleRuleCSSRule.UNKNOWN_RULE0CSSUnknownRuleCSSRule.CHARSET_RULE2CSSCharsetRule

CSSStyleRule目标特性:

selectorText：写保护，回到当今标准的选择符；style：写保护，回到一个CSSStyleDeclaration目标，能够根据它设定和获得标准中指定的款式值；styleMap：一个StylePropertyMap目标；console.log(rule.cssText); // 界定标准的字符串数组console.log(rule.parentRule);console.log(rule.parentStyleSheet); // CSSStyleSheetconsole.log(rule.selectorText); // 选择符console.log(rule.style); // CSSStyleDeclarationconsole.log(rule.styleMap); // StylePropertyMapconsole.log(rule.type); // 1

最常见的特性是cssText，selectorText和style。csxt特性类似款式。特性，但它并不相同。前面一种包括选择符和紧紧围绕款式信息内容的花括号，而后面一种只包括款式信息内容。CssText是可读写的，style.cssText是应写的。

console.log(rule.cssText); // .container{color:white}console.log(rule.style.cssText); // color:whiterule.style.cssText = "background-color:purple";console.log(rule.cssText); // .container{background-color:purple;}console.log(rule.style.cssText); // background-color:purplerule.style.cssText = "color:white;";

大部分状况下，仅应用款式特性就可以达到全部实际操作款式标准的规定；像每一个属性上的款式特性一样，这一目标能够根据它载入和改动标准中的款式信息内容。

console.log(rule.style.width);console.log(rule.style.height);rule.style.backgroundColor = "lightgray";console.log(rule.style.cssText);

CSSStyleRule目标的款式特性使用方法与内联样式目标同样，但必须特别注意的是，一个是标准目标的款式特性目标，另一个是内联样式目标。

// 解析xmlcss样式表的标准var ss = document.styleSheets[0]; // 第一个css样式表var rules = ss.cssRules ? ss.cssRules : ss.rules; // css样式表标准for(var i=0; i

建立新css样式表:

您需要建立新的css样式表并将其加上到文本文档中；应用DOM技术性，建立一个原素并将其插进到文本文档的头顶部，随后应用其innerHTML特性设定css样式表的內容；在IE的较低版中，CSSStyleSheet目标是由非标方式document.createStyleSheet()建立的，其款式文字由cssText特性值特定。

// 建立一个新css样式表// 对文本文档加上一个css样式表，用自定义的款式添充它// style主要参数可能是字符串数组或目标，假如它是字符串数组，就把它做为css样式表的文字// 假如它是目标，将每一个界定款式标准的每一个特性加上到css样式表中// 特性名即是选择符，其值即是相匹配的款式function addStyles(styles){ var styleElt, styleeSheet; // 先建立一个新css样式表 if(document.createStyleSheet) // 如果是IE styleSheet = document.createStyleSheet(); else{ var head = document.getElementsByTagName("head")[0]; styleElt = document.createElement("style"); // 新的原素 head.appendChild(styleElt); // 这一新css样式表应该是最后一个 styleSheet = document.styleSheets[document.styleSheets.length - 1]; } // 向在其中插进款式 if(typeof styles === "string"){ if(styleElt) styleElt.innerHTML = styles; else styleSheet.cssText = styles; // IE }else{ // 主要参数是标准目标 var i = 0; for(selector in styles){ if(styleSheet.insertRule){ var rule = selector "{" styles[selector] "}"; styleSheet.insertRule(rule, i ); }else{ styleSheet.addRule(selector, styles[selector], i ); } } }}// 运用var styles = "h2 {font-size: 2em; color: red;}";addStyles(styles);var rule = document.styleSheets[1].cssRules[0];addStyles(rule);

CSS动漫:脚本制作化CSS最普遍的用处之一是造成视觉效果动漫实际效果；基本原理是应用setTimeout()或setInterval()不断函数调用来获取原素的内联样式，进而做到视觉效果欠佳的特效实际效果。

// 将e转换为相对定位的原素，使之上下振动// 第一个主要参数能够是原素目标还可以是原素的id// 第二个主要参数是调用函数，将以e为主要参数，将在动漫完毕时启用// 第三个主要参数特定e振动的间距，默认设置是5px// 第四个主要参数特定振动多长时间，默认设置是500msfunction shake(e, oncomplete, distance, time){ if(typeof e === "string") e = document.getElementById(e); if(!time) time = 500; if(!distance) distance = 5; var originalStyle = e.style.cssText; // 储存e的初始style e.style.position = "relative"; // 使e相对定位 var start = (new Date()).getTime(); // 动漫的开始时间 animate(); // 逐渐动漫 // 涵数检查验耗费的時间，并更新e的部位 // 假如动漫进行，它将e复原为初始情况 // 不然，它更新e的部位，分配它本身再次运作 function animate(){ var now = (new Date()).getTime(); // 获得现在时间 var elapsed = now - start; // 从开始至今耗费了多久 var fraction = elapsed / time; // 是总時间的几分之几 if(fraction < 1){ // 假如动漫没完成 // 做为动漫进行占比的涵数，测算e的部位 // 应用正弦函数将进行占比乘于4pi，因此它往返往复式2次 var x = distance * Math.sin(fraction * 4 * Math.PI); e.style.left = x "px"; // 在25ms后或在总時间的最终试着再度运作涵数 // 目地是为了更好地造成每秒钟40帧的动漫 setTimeout(animate, Math.min(25, time - elapsed)); }else{ e.style.cssText = originalStyle; // 修复初始款式 if(oncomplete) // 启用调用函数 oncomplete(e); } }}// 运用var mydiv = document.getElementById("mydiv");shake(mydiv,function(e){console.log(e.style)},5,500);// 以ms级的時间将e从彻底不全透明谈进入彻底全透明// 在函数调用时假定e是彻底不全透明// oncomplete是一个可选择的涵数，以e为主要参数，它将在动漫完毕时启用// 如果不特定time，默认设置为500msfunction fadeOut(e, oncomplete, time){ if(typeof e === "string") e = document.getElementById(e); if(!time) time = 500; // 应用Math.sqrt做为一个简洁的缓动涵数来建立动漫 // 离散系统，由快到慢 var ease = Math.sqrt; var start = (new Date()).getTime(); // 动漫的开始时间 animate(); // 逐渐动漫 function animate(){ var elapsed = (new Date()).getTime() - start; // 耗费時间 var fraction = elapsed / time; // 总時间的几分之几 if(fraction < 1){ // 假如动漫没完成 var opacity = 1 - ease(fraction); // 测算原素的不透明度 e.style.opacity = String(opacity); // 设计方案不透明度 setTimeout(animate, Math.min(25, time - elapsed)); }else{ e.style.opacity = "0"; // 彻底全透明 if(oncomplete) oncomplete(e); } }}fadeOut(mydiv,null,500);