动态加载CSS – jQuery与普通Javascript

前端之家收集整理的这篇文章主要介绍了动态加载CSS – jQuery与普通Javascript前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我在java脚本代码中加载CSS文件.起初我使用了jQuery代码.它工作正常,但过了一段时间后我意识到CSS规则不适用于IE浏览器.所以我用Google搜索并用document.createElement版本替换它.现在它在所有浏览器中都能顺利运行谁知道为什么?这两种方法有区别吗?

var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = filename;
cssNode.media = 'screen';
cssNode.title = 'dynamicLoadedSheet';
document.getElementsByTagName("head")[0].appendChild(cssNode);

var $fileref = $("

谢谢,Paweł

附:另一个提示

$('head').append($fileref);

document.getElementsByTagName("head")[0].appendChild($fileref[0]);

使用第一个$方法加载文件失败,而使用document.getElement …工作.所以,像这样的工作:

var $fileref = $("

作品.

———————–提示2
另一个踢球者:

这个工作:

var $fileref = $("

这个没有:

var $fileref = $('
最佳答案
除了其他一些东西(比如createDocumentFragment)之外,jQuery在很大程度上依赖于innerHTML进行元素创建/操作,因为它是动态创建/修改页面内容的最快方式.

尽管大多数浏览器都支持innerHTML,但它并不是W3C标准的一部分,尽管它在浏览器中的工作方式相当一致,但它确实带有一些怪癖.

例如,它允许插入无效的HTML,因此难以捕获错误;当删除元素时,它可能会引入与被删除的DOM元素相关的事件和数据的内存泄漏;当使用innerHTML创建元素时,特别是在页面加载时,事件处理程序尚未绑定到元素,这就是我认为这里发生的事情,因为链接是一个特殊标记,就事件而言,因为页面需要开始下载一旦链接标记添加到DOM,样式表就会在加载完成后自动更新,并且由于没有事件处理程序告诉它,页面什么都不做.

因此,即使innerHTML在大多数浏览器中都能完美运行,它也不是W3C标准的一部分,最好使用标准DOM方法(createElement,appendChild等)添加这些特殊标记.

我不是IE用户,我不能列出所有使用innerHTML创建问题的元素,但我知道我在IE8中遇到问题,google的excanvas.js无法将自身附加到动态创建的canvas元素上,并且我需要重新创建使用jQuery(因此是innerHTML)创建的所有canvas元素,并使用标准DOM createElement方法重新创建它们.

这很有趣,因为Internet Explorer是第一个拥有innerHTML的浏览器(正如微软发明了这个属性),它也是没有正确实现它的浏览器.

猜你在找的CSS相关文章