sheet插入新的style rule

作者:官方彩票手机投注网站-服务器运维

很少会插入一个新的style rule,今天为了临时解决页面样式问题,需要更新很多页面的一些样式,这些页面都引用了一个公共的js,为了方便,直接在这个公共的js里面向style sheet插入新的style rule。 先看代码: 复制代码 代码如下: /** * Add a stylesheet rule to the document (may be better practice, however, * to dynamically change classes, so style information can be kept in * genuine styesheets (and avoid adding extra elements to the DOM)) * Note that an array is needed for declarations and rules since ECMAScript does * not afford a predictable object iteration order and since CSS is * order-dependent (i.e., it is cascading); those without need of * cascading rules could build a more accessor-friendly object-based API. * @param {Array} decls Accepts an array of JSON-encoded declarations * @example addStylesheetRules([ ['h2', // Also accepts a second argument as an array of arrays instead ['color', 'red'], ['background-color', 'green', true] // 'true' for !important rules ], ['.myClass', ['background-color', 'yellow'] ] ]); */ function addStylesheetRules { var style = document.createElement; document.getElementsByTagName[0].appendChild; if { /* For Safari */ style.appendChild(document.createTextNode; } var s = document.styleSheets[document.styleSheets.length - 1]; for (var i=0, dl = decls.length; i < dl; i++) { var j = 1, decl = decls[i], selector = decl[0], rulesStr = ''; if (Object.prototype.toString.call === '[object Array]') { decl = decl[1]; j = 0; } for (var rl=decl.length; j < rl; j++) { var rule = decl[j]; rulesStr += rule[0] + ':' + rule[1] + (rule[2] ? ' !important' : '') + ';n'; } if { s.insertRule(selector + '{' + rulesStr + '}', s.cssRules.length); } else { /* IE */ s.addRule(selector, rulesStr, -1); } } } 复制代码 代码如下: addStylesheetRules(["div.content", ["color": "#000"], ["border-width","1px"], ["border-style", "solid"]]) 执行后当前document的head标签内,多了一个style 复制代码 代码如下:

复制代码 代码如下: addStylesheetRules( [selector, [attr, value], …], [selector, [attr, value], …] ); 主要用到两个方法: 标准方法:stylesheet.insertRule rule:被插入的rule,如 div.content{color:#000} index: 插入顺序,先后顺序会影响样式的。从0开始 firefox、chrome、opera、safri、ie从ie9开始也支持这个方法 ie的stylesheet.addRule (selector, styleDef [, positionIndex]); selector:如div.content styleDef:如color:#000 positionIndex:默认-1,插入到末尾 ie、safari、chrome支持这个方法

本文由彩票投注软件发布,转载请注明来源

关键词: