동적 콘텐츠 용 CSS

자바 스크립트로 웹 페이지에 콘텐츠를 추가하고 있습니다. 문제는 IE (7)의 CSS가 동적으로 추가 된 콘텐츠에 적용되지 않는 것 같습니다.동적 콘텐츠 용 CSS

여기 .. 예를 들어 문서의 FF에서

<html> 
<head> 
    <style type="text/css"> 
    p.foo { color: #FF4400 ; background-color: #000000 } 
    p.bar { color: #FF0000 ; background-color: #000000 } 
    </style> 
    <script type="text/javascript"> 
     function add() { 
      var node = document.createElement("p"); 
      node.setAttribute("class", "bar"); 
      node.appendChild(document.createTextNode("New Content")); 
      document.body.appendChild(node); 
     }; 
    </script> 
</head> 
<body onload="add()"> 
     <p class="bar">bar</p> 
     <p class="foo">foo</p> 
</body> 
</html>

, 새로 추가 된 '새로운 콘텐츠'단락에 적용된 스타일을 가지고 있지만, IE에서는 그렇지 않습니다. 이것은 쉽게 검색 할 수 있어야만하는 명백한 것처럼 보입니다. 그러나 명백한 쿼리는 나에게 아무 것도주지 않았습니다.

그래서 트릭이 무엇입니까?

출처

2009-03-09 Afton

왜 프레임 워크를 사용, 같은 jQuery, MooTools, extJs, Dojo, Prototype 등 이미 이러한 모든 문제를 해결했다고?

하지만 당신은 스스로 일을 주장하는 경우, 사용해보십시오 :

function add() { 
     var node = document.createElement("p"); 
     node.className = 'bar'; // <- use in leu of setAttribute() 
     node.appendChild(document.createTextNode("New Content")); 
     document.body.appendChild(node); 
    };

출처

2009-03-09 01:08:31 tvanfosson

이미 이러한 문제를 모두 해결 한 프레임 워크 (들)의 이름을 공유시겠습니까? – overslacked

jQuery는 하나입니다. 나는 YUI, Dojo, Mootools, Prototype도 그것을 해결했다고 확신한다. –

거의 모든 자바 스크립트 프레임 워크는 이러한 브라우저 간 문제를 처리합니다. 저는 jQuery를 사용합니다. 그러나 프로토 타입/스크립트, mootools, extjs 등을 볼 수도 있습니다. – tvanfosson

답변

관련 문제