.innerText가 느린 스타일 시트의 내용을 업데이트합니다.

스타일 시트가 있습니다. 사용자 UI를 기반으로 즉석에서 내용을 업데이트하고 있습니다. Firefox (stylesheet.innerHTML 사용)와 IE (stylesheet.styleSheet.cssText 사용)가 잘 작동하는 것으로 나타났습니다..innerText가 느린 스타일 시트의 내용을 업데이트합니다.

큰 스타일 시트에서 Chrome 및 Safari (stylesheet.innerText 사용)가 매우 느리게 실행되는 것으로 보입니다. 누구든지이 문제를 겪었거나 더 나은 해결책을 찾았습니까?

편집 : 그것은 응용 프로그램이 결코 새로 고칩니다 사용자가함으로써 인라인 스타일을 누킹 "페이지를"전환 할 수 있기 때문에 인라인 스타일을 변경하는 JS을 사용할 수 없습니다. 또한 UI를 사용하여 링크를 수정하려는 경우 다음과 같은 가상 클래스를 수정하기 위해 인라인을 사용할 수 없습니다. 호버 (알고있는 한도 내에서)

출처

2010-12-07 Dave Stein

그래서이 때문에 지난 년을위한 스타일 시트를 업데이트 내 기능을하고있다 :

function(style, style_value) { 

    if ('cssText' in style.styleSheet) { 

    // without this line, IE WILL crash, if no stylesheet settings were set 
    if (typeof(style_value) != 'string' || !style_value.length) { 
     return; 
    } 
    style.styleSheet.cssText = style_value; 

    } 
    else { 
    style.innerHTML = style_value; 
    } 

}

출처

2010-12-08 15:22:12

CSS를 다시 파싱하고 문서를 리플 로우하는 것이 느린. 당신이 필요로 할 수있는 모든 규칙을 포함 시키길 원하지만 <html> 요소에 클래스를 "네임 스페이스"한 다음 cssText/innerText를 사용하는 대신 클래스를 추가하거나 제거하여 활성 규칙을 변경하십시오.

CSS :

이

.foo h1 { color: green } 
.bar h1 { color: red }

자바 스크립트 :

document.documentElement.className = new Date().getHours() >= 12 ? 'foo' : 'bar';

이는 <html> 요소 jQuery를 (또는 동급)를 통해 그래서 더 조심 분석 또는 전환 클래스에서 다른 클래스 이름을 소지품 것이 일반적으로 적합 할 것 .

JavaScript가 실제로 어떤 CSS 규칙을 변경해야하는지 알고 있다면 즉시 스타일 규칙을 수정할 수도 있습니다. 실제로는 요소 스타일을 수정하는 것과 유사합니다. 즉, myElement.style.color = 'green'; Opera 웹 커리큘럼은 good explanation of modifying CSS via JavaScript입니다.

var modifyStyleRule; 

(function(doc){ 
    var sheets = doc.styleSheets, 
     rules = 'cssRules'; 
    rules = sheets[0][rules] ? rules : 'rules'; 

    modifyStyleRule = function (sheetIndex, ruleIndex, propertyValues) { 
     var style = sheets[sheetIndex][rules][ruleIndex].style, 
      prop; 

     for (prop in propertyValues) { 
      if (propertyValues.hasOwnProperty(prop)) { 
       style[prop] = propertyValues[prop]; 
      } 
     } 
    }; 
})(document);

사용 예제 : modifyStyleRule(0, 0, {color: 'red'}); 크로스 브라우저 방식의

예는 하나의 규칙을 수정합니다. 이 (크기/위치 VS 색)로 변경 사항의 종류와 양에 따라이 아주 쉽게 sheet.innerHTML 또는 동등 이상의 느릴 수

참고. 이 기법은 수시로 편리하게 사용되며 "스타일 네임 스페이스"와 결합하여 클래스 이름을 바꿀 때 큰 변화가 여전히 발생할 수 있습니다.

출처

2010-12-08 00:04:48

을 굵게 또는 굵게 또는 기울임 꼴로 클래스를 변경하는 등의 대부분의 옵션을 사용할 수 없지만 RGB 색상을 변경하기 위해 적응할 수 있는지는 확실하지 않습니다. el.style이이 경우 사용할 수없는 이유에 대한 다른 장래의 포스터에 대해서는 위에 편집했습니다. –

"글로벌"CSS 규칙을 수정하는 대신 el.style을 제안하지 않았습니다. 오페라 링크에는 예제가 있지만 인터넷 익스플로러 예제가 빠르면 지저분한 'document.styleSheets [0] .rules [0] .style.color ='blue ';' 방문한 색 '(올바른 스타일 시트와 규칙 인 경우). –

style.rule 이외의 다른 편집 방법에 대한 기사를 확인했습니다. 나는 .rules 방법을 보지 않는다. 그리고 나는 행운이없는 Chrome에서 노력했다. 긴 하루를 보낸 후 미안 해요. insertRule 및 해당 아티클의 메서드를 지금보고 있습니다 ... 그들은 잘 작동하지만 innerText에서 수정 된 정보를 얻을 수없는 것 같습니다. 그 문제는 이차적이지만 나중에 수정할 수 있도록 수정 한 후 CSS 시트를 저장할 수 있기를 바랍니다. –

당신이 브라우저 독립적 인 사용이 코드를 확인하려면 : 더 클래스 I을 사용하여

var field = document.getElementById(id); // where u want to use innertext 

if(field != null) 
{   
    if(navigator.appName == "Netscape") // appName for both FireFox and Chrome its is "Netscape" i checked it with different version. 
     field.textContent = value; 
    else // for For IE v 8 i checked .textContent is not supported by IE for me it was not working. 
     field.innerText = value;  
}

출처

2012-01-02 12:10:11 ifti

jQuery를 사용하고 있으므로 탐색기를 사용할 필요가 없습니다. 그들은 저를 위해 그 비트를 처리합니다. –

.innerText가 느린 스타일 시트의 내용을 업데이트합니다.

답변

관련 문제