المغلق لمحتوى ديناميكي

https://stackoverflow.com/questions/624651

05-07-2019
|

سؤال

وأنا أعمل على إضافة محتوى لصفحات الإنترنت مع جافا سكريبت. المشكلة هي أن CSS في IE (7) لا يبدو تنطبق على محتوى إضافتها بشكل حيوي.

إليك وثيقة سبيل المثال ..

<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، والمضافة حديثا "المحتوى الجديد" فقرة لديها النمط المطبق على ذلك، ولكن في IE، فإنه لا يفعل ذلك. هذا يبدو وكأنه شيء واضح بما فيه الكفاية أنه يجب أن تكون قابلة للبحث من أجل بسهولة، ولكن أعطاني بعض الاستفسارات واضحة لا شيء.

فما هو خدعة؟

المحلول

لماذا لا تستخدم هذا الإطار، مثل مسج و <لأ href = "http://mootools.net" يختلط = "noreferrer"> موتولز أو extJs و <لأ href = "HTTP: //www.dojotoolkit. غزاله / "يختلط =" noreferrer "> دوجو أو نموذج وغيرها، التي حلت بالفعل كل من هذه المشاكل؟

ولكن إذا كنت تصر على فعل ذلك بنفسك، حاول استخدام:

    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