如何删除 div 背景？答案

【问题标题】：How to remove div backgrounds?如何删除 div 背景？
【发布时间】：2012-03-27 00:54:05
【问题描述】：

我在网站标记中有一个 div 元素，如下所示。

<div id="mainContainer" class="container" runat="server">

我已经为它分配了一个 css 类，如下所示。

div#mainContainer.container {
        width: 100%;
        margin: 0 auto;
        margin-top:40px;
        height:500px;
        background:url("../img/bgimg.png")no-repeat;
    }

现在单击按钮后，我只想删除该 div 的背景，并且不想篡改其中元素的任何定位。顺便说一句，我正在使用 ASP.net 创建这个网站。我该怎么做？

【问题讨论】：

您想通过 javascript 还是在服务器端事件中执行此操作？
请详细说明您的尝试，以便我们更好地为您提供帮助。
抱歉之前的描述非常简短。请检查更新的。

标签： asp.net html css

【解决方案1】：

如果您想在服务器端事件中实现这一点，您需要将runat="server" 属性添加到您的<div> 元素，并且它需要一个id 属性。这将使更改服务器端变得容易。

您需要在代码隐藏中使用事件处理程序方法来单击按钮。

在此事件处理程序中，执行类似的操作（假设您的 <div> 的 id 是“容器”）

container.Style["background"] = String.Empty;

但是，在你的问题中，你说你已经为你的元素分配了一个类。如果是这种情况，上述方法可能不起作用。定义另一个没有此背景图像规则的 CSS 类可能是最简单的，然后在代码隐藏中执行以下操作：

container.Attributes["class"] = "newClass";

【讨论】：

是的，我想做非常相似的事情。我尝试了您的解决方案，但它不起作用。顺便说一句，我在按钮单击事件中添加了以下行。 mainContainer.Style["background"] = String.Empty;

【解决方案2】：

现在使用纯CSS。

.button{
   background:green;
}
.background-class{
    background:red;
}

.button:active + .background-class{
    background:yellow;
}

查看http://jsfiddle.net/AX8tY/

【讨论】：

@Madmartigan 请指出我的错误，因为我没有太多 js 经验。
在这种情况下，我建议您不要提供任何涉及 js/jquery 的答案，尤其是在急于成为第一个答案的情况下。我看到你修复了$(div)，但你还有 2 个。 function 一如既往地需要()，并且您需要决定如何将参数传递给css()。逗号分隔或对象表示法...不混合。

【解决方案3】：

您需要使用 JavaScript（直接或一些 JavaScript 框架，如 jQuery）并将 CSS 样式设置为

background:none

这意味着您可以更改特定实例的样式，或者您可以定义一个新的 CSS 类来应用。

【讨论】：

【解决方案4】：

用一个简单的 javascript 作为： onclick="javascript:getElementById('div_element_id').style.backgroundImage = '';" 或者你也可以使用 jQuery 的 API。

【讨论】：

【解决方案5】：

这样的事情怎么样：

如果你的 HTML 是这样的：

<button class="your-button" />
<div class="background-class">
    ...
</div>

那么你的 JS 可能看起来像这样（假设你也在使用 jQuery）：

$(".your-button").click(function(){
    $(".background-class").removeClass("background-class");
});

编辑：我刚刚在您的评论中看到您想使用服务器端事件。这是一个客户端解决方案。

【讨论】：

【解决方案6】：

如果你使用 jQuery，你可以尝试这样的事情：

$('button#idButton').click(function{
$('div#idDiv').css('background':'none')
});

如果你不使用 jquery，你应该在 onClick 事件上实现一个 javascript 函数，尝试类似：

<input type="button" name="button1" id="button1" onClick="javascript:deleteBackground()" />
<script>
function deleteBackground(){
Document.getElementById('div_element_id').style.backgroundImage = ''; 
}
</script>

【讨论】：

【解决方案7】：

如果你定义了一个类

.yourclassname {
   background: url('..');
}

你也可以使用移除类功能

$('div').removeClass('yourclassname');

【讨论】：

【解决方案8】：

<script language="javascript" type="text/javascript">
    function SetClass() {
        var ID = document.getElementById('<%=mainContainer.ClientID %>');

        ID.className += " ChangeBackground";
        return false;
    }
</script>

<style type="text/css">
    div#mainContainer.container
    {
        width: 100%;
        margin: 0 auto;
        margin-top: 40px;
        height: 500px;
        background: url("wallpaper-1554220.jpg")no-repeat;
    }

    .ChangeBackground
    {
        background: none !important;
    }
</style>

<asp:Button ID="btn" OnClientClick="return SetClass();" runat="server" Text="Change CSS"/>

【讨论】：