IE不应用动态加载的CSS
IE不应用动态加载的CSS
提问于 2010-06-29 00:19:31
IE (至少是旧版本)似乎不会应用动态加载的CSS。如果您通过ajax将包含CSS的页面加载到"lightbox“或"colorbox”中，这可能是一个痛点。
例如，假设您的HTML页面有一个名为“taco”的div：
<style>#taco {color:green;}</style>
<div id="taco">Hola Mundo!</div>“万岁！”将是绿色的，因为CSS已包含在原始HTML页面中。然后出现一些Javascript，并将其附加到“taco”后面：
<style>#taco {color:green;}</style>
<div id="taco">
Hola Mundo!
<style>#burrito {color:red;}</style>
<span id="burrito">mmmm burrito</span>
</div>在除IE之外的所有浏览器中，墨西哥卷饼的字体都将为红色。
那么有没有办法在IE中做到这一点呢？看起来好像没有。
回答 4
Stack Overflow用户
发布于 2010-06-29 00:39:22
只允许在head部分中使用style标记。把它放在其他地方是完全无效的，这与IE无关。
顺便说一句，为了解决你的问题，如果你不能把样式放在一个全局样式表中，你可以使用‘’属性来修改元素：
<p style="...">或者，您可以使用iframe，但这样您就必须提供整个页面，而不仅仅是几个标记。
Stack Overflow用户
发布于 2010-06-29 00:47:31
您可能希望开始使用jQuery的.CSS方法来进行这样的动态样式更改。
$("#jane").css('color', '#0F0');或者只是简单的 jane Javascript：
document.getElementById['sally'].style.color = '#0F0';编辑：
让你的ajax注入这个：
<div id="jane">
<div id="sally">Hi, I'm Sally!</div>
<script>document.getElementById['sally'].style.color = '#0F0';</script>
</div>或者为什么不直接在服务器端注入内联样式的元素呢？
<div id="jane">
<div id="sally" style="color:#0F0">Hi, I'm Sally!</div>
</div>Stack Overflow用户
发布于 2012-06-18 17:08:09
如果没有办法做到这一点，并且您不想更改服务器端代码，这里有一种用于非常简单的样式元素的方法：
// In the callback function, let's assume you're using jQuery
success: function( data ) {
// Create a dummy DOM element
var el = document.createElement( 'div' );
// Add the html received to this dummy element
el.innerHTML = data;
// so that you can select its html:
var s = $( 'style', el ).text();
// Delegate to another function, it's going to get messy otherwise
addRules( s );
}
function addRules( s ) {
// First, separate your strings for each line
var lines = s.split( '\n' ),
// Declare some temporary variables
id,
rule,
rules;
// Then, loop through each line to handle it
$.each( lines, function() {
id = $( this ).split( ' ' )[ 0 ];
// Get the rules inside the brackets, thanks @Esailija
rules = /\{\s*([^}]*?)\s*\}/.exec( $( this ) )[ 1 ];
// Split the rules
rules = rules.split( ';' );
$.each( rules, function() {
rule = $( this ).split( ':' );
// Apply each rule to the id
$( id ).css( $.trim( rule[ 0 ] ), $.trim( rule[ 1 ] ) );
} );
} );
}所以，是的，基本上我是在做一个CSS解析器。
这是一个非常基础的解析器。
它将仅解析以下规则：
#some-id { some: rule; another: rule; }
#other-id { some: rule; yet: another; rule: baby; }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3134164
复制相关文章
相似问题