현재 스타일 시트_javascript 기술에 새로운 스타일 구현 방법을 삽입합니다.

새로운 스타일 규칙을 삽입하는 경우는 거의 없습니다. 현재 페이지 스타일 문제를 일시적으로 해결하려면 많은 페이지의 일부 스타일을 업데이트해야 합니다. 이 공개 js.

먼저 코드를 보세요:

코드를 복사하세요 코드는 다음과 같습니다:

/* *
* 문서에 스타일시트 규칙을 추가합니다(더 나은 방법일 수 있지만
* 클래스를 동적으로 변경하여 스타일 정보를
* 정품 스타일시트에 보관할 수 있음(그리고 DOM에 추가 요소를 추가하지 않음) ))
* ECMAScript는
* 예측 가능한 객체 반복 순서를 제공하지 않고 CSS는
* 순서 의존적이므로(즉 계단식) 선언과 규칙에 배열이 필요합니다.
* 계단식 규칙이 필요하지 않은 경우에는 접근자 친화적인 객체 기반 API를 구축할 수 있습니다.
* @param {Array} decls JSON으로 인코딩된 선언 배열을 허용합니다.
* @example
addStylesheetRules([
['h2', // 배열 배열로 두 번째 인수도 허용합니다. 대신
['color', 'red'],
['ground-color', 'green', true] // !중요 규칙의 경우 'true'
],
['. myClass',
['배경색', '노란색']
]
]);
*/
function addStylesheetRules (decls) {
var style = document.createElement('style')
document.getElementsByTagName('head')[0] .appendChild(style);
if (!window.createPopup) { /* Safari의 경우 */
style.appendChild(document.createTextNode(''))
}
var s = document .styleSheets[document.styleSheets .length - 1];
for (var i=0, dl = decls.length; i var j = 1, decl = decls[i] , selector = decl[0 ], ruleStr = '';
if (Object.prototype.toString.call(decl[1][0]) === '[객체 배열]') {
decl = decl[1];
j = 0;
}
for (var rl=decl.length; j var rule = decl[j]; ruleStr = rule[0] ':' rule[1] (rule[2] ? ' !important' : '') ';n'
}
if (s.insertRule) {
s .insertRule(selector '{ ' ruleStr '}', s.cssRules.length)
}
else { /* IE */
s.addRule(selector, ruleStr, -1); >}
}
}

코드 복사 코드는 다음과 같습니다

addStylesheetRules( ["div.content", ["color": "#000"], ["border-width","1px"], ["border-style", "solid"] ])

실행 후 추가 스타일이 있습니다

코드 복사 코드는 다음과 같습니다 :

방법은 아시죠? 호출할 때마다 발생하므로 한 번 호출하고 여러 규칙을 삽입하는 것이 가장 좋습니다.

코드 복사 코드는 다음과 같습니다.

addStylesheetRules(

[selector, [attr, value], …],
[selector, [attr, value], …]
);

주로 두 가지 방법을 사용합니다.
: 표준 방법: stylesheet.insertRule(rule, index) rule: 삽입된 규칙 등 as 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, 끝에 삽입
즉, Safari 및 chrome은 이 방법을 지원합니다.