Question

<table>
   <tr>
       <td class="temp" onclick="removeBGColor();">
             fdgdfgdfgdfgdf
       </td>
   </tr>
</table>

<style type="text/css">
.temp {
    background-color: red;  
} 
</style>
<script language="javascript">
function removeBGColor() {
    $(".temp").css("background-color", "" );
}
</script>

它不会从中删除红色。这是什么解决方案？谢谢

Answer 1

只需将其设置为transparent。

$(".temp").css("background-color", "transparent");

Answer 2

您可以根据需要实施它。（但是，我个人不喜欢我的任何一个javascript混乱我的HTML）。

最容易跳到开头，但最难维持到最后。

现在，关于你的问题，在我之前，所有这些人都提出了如何解决问题的极好建议，因为坦率地说，所有这些都有效。

但是，他们没有告诉你为什么你的代码不起作用。

你无法让背景从红色变化的原因是你没有告诉它要改变什么。

所有浏览器都会忽略空字符串。

这很简单，浏览器会查看你给它的值，它是“”。需要的是，问自己：这是十六进制值，rgb值还是rgba值？答案是错误的。由于浏览器只关心hex，rgb和rgba（很快就会出现，HSL），它忽略了其他一切。所以，你的结果一无所获。

所以真正的问题是......你想用什么颜色改变背景颜色？

是否要将其更改为透明，以便用户可以看到它背后的元素，或者您不知道要将其更改为什么颜色，并且只是想要在添加红色之前将其恢复为原样背景

如果是这样的话，那么carillonator的第一个评论就会完美无缺。 “透明”是除了正文之外的所有元素的默认值（至少我相信如此，否则我们每次制作新标签时都会通过浏览器看到我们的桌面）。

如果您希望元素与其中一个元素具有相同的背景颜色，那么您将使用Kyle Hotchkiss的答案。

'inherit'告诉该元素查找DOM Tree中任何具有您想要的属性值的父类。在这种情况下，'background-color'，它将使用此父级背景颜色的值作为自己的背景颜色。

例如，如果您的表格背景颜色为黑色，并且您将“.temp”td背景颜色设置为“inherit”：

    <table>
        <tr>
        <td class="temp" onclick="removeBGColor();">
             fdgdfgdfgdfgdf
        </td>
   </tr>
</table>

<style type="text/css">
    table {
        background-color: black;
    }
    .temp {
        background-color: red;  
    } 
</style>
<script language="javascript">
function removeBGColor() {
    $(".temp").css("background-color", "inherit" );
}
</script>

由于css特异性（一个完全不同的主题...... a great article here for more info）而输入先前分配给它的声明的红色背景颜色，它首先会查看没有分配给background-color属性的表行然后它会向上移动一层，这会带来“桌子”，背景颜色为黑色。

因此，td背景也会变黑。

简而言之，您没有语法或意外结果的问题。

这些是您将学会期待的结果（并且可能已经学习过）。

浏览器无法将背景颜色更改为空，因此忽略它。

它必须具有rgb，rgba或十六进制值，或者诸如（“red”，“black”，“white”，“inherit”，“transparent”等）的关键字。

Answer 3

编辑：我的回答并非总是如此;请参阅下面的加勒特的评论。

出于某种原因，你必须使用jQuery的camelCase CSS属性名称：

$('.temp').css('backgroundColor','whatever');

here是一些信息。

Answer 4

或者您甚至可以将其设置为“继承”，以便从父级获取它。

Answer 5

从HTML代码调用javascript不是jQuery样式。您可以使用 removeClass() 删除您的CSS背景颜色，而不是直接更改您的CSS。

将您的代码更改为此类

<style type="text/css">
.temp {
    background-color: red;  
} 
</style>

<script language="javascript">
$(function(){
    $("#tdTemp").click(function(){
        $(this).removeClass("temp");
    });
});
</script>

<table>
   <tr>
       <td id="tdTemp" class="temp">
             fdgdfgdfgdfgdf
       </td>
   </tr>
</table>

Answer 6

你应该使用它：

$(".temp").css("background", "inherit");

而不是：

$(".temp").css("background-color", "inherit");

css（“background-color”，“”）不起作用

6 个答案: