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中做到这一点呢?看起来好像没有。
发布于 2010-06-29 00:39:22
只允许在head
部分中使用style
标记。把它放在其他地方是完全无效的,这与IE无关。
顺便说一句,为了解决你的问题,如果你不能把样式放在一个全局样式表中,你可以使用‘’属性来修改元素:
<p style="...">
或者,您可以使用iframe
,但这样您就必须提供整个页面,而不仅仅是几个标记。
发布于 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>
发布于 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; }
https://stackoverflow.com/questions/3134164
复制相似问题