동적 콘텐츠를위한 CS

StackOverflow https://stackoverflow.com/questions/624651

  •  05-07-2019
  •  | 
  •  

문제

JavaScript를 사용하여 웹 페이지에 컨텐츠를 추가하려고합니다. 문제는 IE (7)의 CSS가 동적으로 추가 된 컨텐츠에 적용되지 않는다는 것입니다.

다음은 예제 문서입니다 ..

<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>

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

그렇다면 트릭은 무엇입니까?

도움이 되었습니까?

해결책

다음과 같은 프레임 워크를 사용하지 않겠습니까? jQuery, mootools, extjs, 도조, 원기, 등, 이미 이러한 모든 문제를 해결 했습니까?

그러나 직접 수행 할 것을 주장한다면 다음을 사용해보십시오.

    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);
    };
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top