当使用jQuery.attr（）来设置一个属性时，浏览器不会从css中更新样式

我有一个站点帽子列出了一组可以下载的文件。自定义属性docType是基于文件扩展名设置的。如果没有扩展名，则docType设置为“unknownDoc”。 CSS文件类似于这样：当使用jQuery.attr（）来设置一个属性时，浏览器不会从css中更新样式

.TitleColumn[docType="pdf"] 
{ 
    background: url("/images/common/icons/pdf.png") no-repeat left center; 
} 

.TitleColumn[docType="doc"], TitleColumn[docType="docx"] 
{ 
    background: url("/images/common/icons/word.png") no-repeat left center; 
} 

.TitleColumn[docType="unknownDoc"] 
{ 
    background: url("/images/common/icons/unknownDoc.png") no-repeat left center; 
}

这很可能是一个用户上传，我们没有一个CSS样式设置了又一个文件。在这种情况下，该项目将有一个docType，但没有背景图像。在这些情况下，我想要应用unknownDoc风格。所以我使用以下内容：

$('.TitleColumn').each(function (index) { 
    var hasNoDocImage = $(this).css("background-image") == "none"; 
    var docType = $(this).attr("docType"); 

    if (hasNoDocImage && docType) { 
     $(this).attr("docType", "unknownDoc"); 
     $(this).addClass("TitleColumn[docType=\"unknownDoc\"]"); 
    } 
});

这工作正常。我不明白的是为什么我必须使用addClass语句？ attr或addClass本身不起作用。就好像添加属性不会导致浏览器根据addClass那样的新属性重新设置项目样式。这是一个jQuery的东西或浏览器的东西？

有没有更好的方法来做到这一点？

我试过只使用类而不是docType自定义属性，但它太乱了，尤其是当将来可能会向其中添加其他类时。

来源

2010-12-01 Matt Penner

感谢您的好评。我将保持代码的方式（但如果有人提出我更喜欢的建议，我可以说服他做不同的事情）。我这样做的原因是我非常喜欢使用docType属性的清洁。另外，它看起来像单一的.addClass行真的是一个修复IE，因为FF和Chrome正确处理它。所以，一行一行IE修复几乎不是一个大问题，而且，现在，这是相当标准的。 – 2010-12-03 16:27:42

似乎只是与IE浏览器一样Chrome和FF工作正常，没有addClass。以上你的更容易的版本是：

$(this).attr("docType", "unknownDoc").removeClass('TitleColumn').addClass('TitleColumn');

似乎是IE的无力（或jQuery的）了解到选择器的动态变化。

您可以在此小提琴验证FF和Chrome都很好：http://jsfiddle.net/fUSVF//

来源

2010-12-01 23:05:37 methodin

啊，谢谢。你是对的。我们80％的用户仍然使用IE浏览器，这是我测试的第一个浏览器。经过漫长的一天的编码，我认为我只是处于一种尴尬的境地，并没有想到要看看FF和Chrome是否有效。 – 2010-12-03 16:19:52

是否有我需要使用removeClass的原因？ addClass以某种方式将DOM中的类加倍，如果是的话，这是一个问题吗？ – 2010-12-03 16:20:58

addClass不会影响元素，因为它已经有了类。removeClass后跟addClass基本上重置元素上的类相关定义，并会导致重新计算任何依赖关系（如属性选择器） – methodin 2010-12-04 03:58:43

那岂不是更简单的改变你的CSS来：检测这种情况后

.TitleColumn[docType="unknownDoc"], .unregisteredExtension 
{ 
    background: url("/images/common/icons/unknownDoc.png") no-repeat left center; 
}

而刚刚.addClass("unregisteredExtension")？

if (hasNoDocImage && docType) { 
     $(this).addClass("unregisteredExtension") 
    }

来源

2010-12-01 23:11:43

你不是真的应该添加自定义属性。浏览器不必关心它们 - 实际上，完全忽略它们是他们可以做的最好的事情，因此确保如果你在其中存储了一些废话，它不会弄乱任何东西。

如果您想通过JavaScript + CSS更改外观，请使用类。最简单的方法是使用一个没有其他类的元素，那么你可以简单地做$(elem).removeClass().addClass('yourNewClass');

来源

2010-12-01 23:18:59 ThiefMaster

当使用jQuery.attr（）来设置一个属性时，浏览器不会从css中更新样式

回答

相关问题