如何删除Chrome中以编程方式添加的样式

Question

我有一个简单的段落，有两个按钮，分别为它上色和删除颜色。颜色删除在Firefox中有效，但在Chrome（确切地说是铬浏览器）中无效。如果我通过样式属性（<p id="paragraph" style="color: #f00;">）而不是通过程序（$('#paragraph').css('color', '#f00');或document.getElementById('paragraph').style.color="#f00";）添加样式，那么颜色删除将在两种浏览器上都有效。不幸的是，在我的现实世界中，这是不可能的。否则我该怎么做？

代码如下：

html

<p id="paragraph">TARGET</p>
<input type="button" value="Style me" onclick="styleIt();" />
<input type="button" value="Strip styles" onclick="stripStyles();" />

javascript

function styleIt()
{
    $('#paragraph').css('color', '#f00');
}
function stripStyles()
{
    $('#paragraph').removeAttr("style");
}

jsFiddle：http://jsfiddle.net/qBtYW/10/

第页。S.我很确定问题在于removeAttr在不同浏览器中的行为方式，但我可能错了。

edit我意识到我可以使用css（"color"，"），但我正在寻找可以删除所有样式的东西，即使是那些我不知道的样式。。。

Answer 1

您可以将样式属性设置为空字符串：

function stripStyles()
{
  $('#paragraph').attr('style', "");
}

我不知道为什么removeAttr会出现问题，但我认为这应该适用于所有浏览器。