javascript - IE 不将 CSS 应用于 JS，在 Chrome/FF 中工作

Question

对于 my site ，它基于 Blogger，我使用了一个名为“最近的文章”的小部件。这些样式适用于 Firefox 和 Chrome，但不适用于 IE。

我是网络开发新手，不懂 JS。

未应用特定 CSS(文章标题):

.bp_item_title {
    margin: 10px 0;
    padding: 0;
    font-family: Tahoma,Geneva,sans-serif;
    font-size: 14px;
} 

我在 IE 上的 firebug 中对此进行了测试，看起来 CSS 样式没有附加到元素上。为什么 IE 不将这些 CSS 样式传递给元素/小部件？

HTML 片段

<!-- ... -->
<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&amp;utm-medium=gadget&amp;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);
    }

Source

Answer 1

setAttribute() 在 IE 中不适用于 style 属性。要支持 IE，请使用 element.className = 'newClass';。使用一个函数来检查 class 属性是否已设置为非空值并在设置时包含这些值也是一个好主意。例如:

// $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, ''); 
    }
}

或者简单地将 class 属性设置为一个新值(而不是附加一个新类或删除一个单独的类):

myDiv.className = "bp_item_thumb";

...而不是...

myDiv.setAttribute("class", "bp_item_thumb");