CSS样式动态样式方法封装（兼容IE）

最新推荐文章于 2026-06-16 18:02:25 发布

原创最新推荐文章于 2026-06-16 18:02:25 发布 · 441 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #javascript

收录于

本文介绍了一种在网页中兼容Internet Explorer浏览器的样式加载方法。通过JavaScript动态创建<style>元素，并根据不同IE版本选择合适的方式注入CSS代码，确保了在IE环境下正确加载样式。

<script>
        // 加载样式函数（兼容 IE）
        function loadStyleString(css) {
            var style = document.createElement('style')
            style.type = 'text/css'
            try{
                // IE 中会把 style 视为一个特殊的节点，不允许访问其子节点
                style.appendChild(document.createTextNode(css))
            } catch (ex) {
                // 解决办法：通过访问元素的 styleSheet 属性，该属性又有一个 cssText 属性可以接受 CSS 代码
                style.styleSheet.cssText = css
            }
            var head = document.getElementsByTagName('head')[0]
            head.appendChild(style)
        }
        /*
            注意：如果专门针对 IE 编写代码，务必小心使用 styleSheet.cssText 属性。
            在重用同一个<style>元素并再次设置这个属性时，有可能会导致浏览器崩溃
            同样，将 cssText 属性设置为空字符串也可能导致浏览器崩溃
        */
    </script>