[英]IE not applying CSS to JS, works in Chrome/FF
For my site , which is based on Blogger, I use a widget called "recent articles". 对于我的网站 ,它是基于博客,我使用了一个名为“最近更新”窗口小部件。 The styles apply in both Firefox and Chrome, but not in IE.
样式适用于Firefox和Chrome,但不适用于IE。
I am new to web development and do not know JS. 我是Web开发的新手,不了解JS。
.bp_item_title {
margin: 10px 0;
padding: 0;
font-family: Tahoma,Geneva,sans-serif;
font-size: 14px;
}
I tested this in firebug on IE and it looks like the CSS style are not being attached to the elements. 我在IE上的萤火虫中对此进行了测试,看来CSS样式未附加到元素上。 Why would IE not pass along these CSS styles to the elements/widget?
IE为什么不将这些CSS样式传递给元素/小部件?
<!-- ... -->
<div class="widget-content">
<div id="bp_recent"><div class="bp_item_title"><a href="http://blog.onlinewagerreview.com/2012/05/miami-heat-vs-boston-celtics-game-2.html?utm_source=BP_recent&utm-medium=gadget&utm_campaign=bp_recent" target="_top" title="Miami Heat vs Boston Celtics, Game 2 Free Pick, Prediction">Miami Heat vs Boston Celtics, Game 2 Free Pick, Prediction</a></div>
if (showThumbs == true && thumbUrl != "") {
myImage = document.createElement('img');
myImage.setAttribute("src", thumbUrl);
if(imgFloat!="none")
{
float_clear=true;
myImage.style.cssFloat=imgFloat;
myImage.style.styleFloat=imgFloat;
}
try{if(myMargin!=0)myImage.style.margin = myMargin+"px";} catch(error){}
myImage.setAttribute("alt", postTitleOriginal);
myImage.setAttribute("width", imgDim);
myImage.setAttribute("height", imgDim);
myLink = document.createElement('a');
myLink.setAttribute("href", postUrl+"?utm_source=bp_recent&utm-medium=gadget&utm_campaign=bp_recent");
myLink.setAttribute("target", "_top");
myLink.setAttribute("title", postTitleOriginal);
myLink.appendChild(myImage);
myDiv = document.createElement('div');
myDiv.setAttribute("class", "bp_item_thumb");
myDiv.appendChild(myLink);
main.appendChild(myDiv);
}
setAttribute()
does not work in IE for the style
attribute. setAttribute()
在IE中不适用于style
属性。 To support IE, use element.className = 'newClass';
要支持IE,请使用
element.className = 'newClass';
. 。 It would also be a good idea to use a function that checks if the
class
attribute is already set to a non-blank value and include those values when setting it. 使用检查
class
属性是否已经设置为非空白值并在设置时包括那些值的函数也是一个好主意。 For example: 例如:
// $el is the element to add $class to
// $class is the string value to append to `class` attribute
function addClass($el, $class) {
if(!$el){
return false;
}
$c = $el.className;
if (($c === null) || ($c === '')) {
$el.className = $class;
} else if ($c.indexOf($class) === -1) {
$el.className = $c + ' ' + $class;
}
}
// $el is the element to remove $class from
// $class is the string value to remove from `class` attribute
function removeClass($el, $class) {
if(!$el){
return false;
}
$c = $el.className;
if (($c !== null) && ($c !== '') && ($c.indexOf($class) !== -1)) {
if ($c.indexOf($class) === 0) $el.className = $c.replace($class, '');
else $el.className = $c.replace(' ' + $class, '');
}
}
Or simply set the class
attribute to a new value (instead of appending a new class or removing an individual class): 或简单地将
class
属性设置为新值(而不是添加新类或删除单个类):
myDiv.className = "bp_item_thumb";
...instead of... ...代替...
myDiv.setAttribute("class", "bp_item_thumb");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.