css( "background-color"，"“)不工作

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值还是RGB值？答案是错误的。由于浏览器只关心十六进制、rgb和rgba (以及即将到来的HSL)，它会忽略其他所有内容。所以，你的结果是什么都不是。

所以真正的问题是...您想要将背景颜色更改为什么颜色？

您是想将其更改为透明，以便用户可以看到它背后的元素，还是您不知道要将其更改为什么颜色，而只是希望它恢复到添加红色背景之前的状态？

如果是这样，那么carillonator的第一个注释将会很完美。“透明”是除主体之外的所有元素的默认值(至少我相信是这样的，否则我们每次创建新标签时都会通过浏览器看到桌面)。

如果你想让元素和它的父元素有相同的背景颜色，那么你可以使用Kyle Hotchkiss的答案。

“inherit”告诉该元素在DOM树中查找它的任何父元素，这些父元素具有您想要的属性的值。在本例中为“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)，它将首先查看未分配背景颜色属性的表行，然后再向上移动一层，这将使其变为“表”，其背景颜色为黑色。

因此，td背景也变成了黑色。

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

这些是你将会学到的结果(可能已经学到了)。

浏览器不能将背景颜色更改为空，因此它会忽略它。

它必须有一个rgb、rgba或十六进制值，或一个关键字，如("red“、"black”、“It”、"inherit“、"transparent”等)。

Answer 3

或者，您甚至可以将其设置为“继承”，这样它就可以从父对象中获取它。