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

/* *
* 문서에 스타일시트 규칙을 추가합니다(더 나은 방법일 수 있지만
* 클래스를 동적으로 변경하여 스타일 정보를
* 정품 스타일시트에 보관할 수 있음(그리고 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 < dl; 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 < rl; 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); >}
}
}

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