Question

我在网站标记中有一个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来创建这个网站。我怎么能这样做？

Answer 1

现在使用纯CSS。

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

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

选中此http://jsfiddle.net/AX8tY/

Answer 2

如果要在服务器端事件中实现此目的，则需要将runat="server"属性添加到<div>元素，并且需要id属性。这样可以很容易地改变服务器端。

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

在此事件处理程序中，执行类似操作（假设id的{{1}}为“容器”）

<div>

但是，在您的问题中，您说您已为元素指定了类。如果是这种情况，上述情况可能无效。没有这个背景图像规则定义另一个CSS类可能最简单，然后在代码隐藏中执行此操作：

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

Answer 3

这样的事情怎么样：

如果你的HTML是这样的：

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

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

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

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

Answer 4

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

background:none

这意味着您可以更改特定实例的样式，也可以定义要应用的新CSS类。

Answer 5

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

Answer 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>

Answer 7

如果你定义了一个类

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

您也可以使用删除类功能

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

Answer 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"/>

如何删除div背景？

8 个答案: