如何删除div背景？

-2

我有一个div元素在网站标记如下。如何删除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来创建这个网站。我怎样才能做到这一点？

来源

2012-03-26 slonkar

做，或者在服务器端事件？ – 2012-03-26 15:45:16

服务器端事件。 – slonkar 2012-03-26 15:46:23

请详细解释您尝试过的内容，以便我们能够更好地为您提供帮助。 – 2012-03-26 15:54:39

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

您需要在代码中使用事件处理程序方法才能进行按钮单击。

在此事件处理程序，这样做（假设你的<div>的id是“容器”）

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

然而，在你的问题，你说你分配你的元素一个类。如果是这种情况，上述可能不起作用。这可能是最简单的定义另一个CSS类没有这个背景图像规则，然后在后台代码做到这一点：

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

来源

2012-03-26 15:52:22

是的，我想做的非常相似。我试过你的解决方案，但它不工作。顺便说一句，我在按钮点击事件中添加了以下行。 mainContainer.Style [“background”] = String.Empty; – slonkar 2012-03-26 16:12:52

现在用纯CSS。

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

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

入住这http://jsfiddle.net/AX8tY/

来源

2012-03-26 15:44:37 sandeep

SO很多的语法错误，我看到在问题中没有提到jQuery ... – 2012-03-26 15:45:51

@Madmartigan请指出我的错误，因为我没有太多js的经验。 – sandeep 2012-03-26 15:47:28

在这种情况下，我建议你不要提供任何涉及js/jquery的答案，特别是急于成为第一个答案。我看到你修正了'$（div）'，但你还有2个。函数一如既往需要'（）'，你需要决定如何将参数传递给'css（）'。用逗号分隔或以对象表示法...不混合。 – 2012-03-26 15:48:14

怎么是这样的：

如果你的HTML是这样的：

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

然后你的JS可能会是这个样子（假设你也使用jQuery）：

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

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

来源

2012-03-26 15:46:44 Ryan

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

background:none

这意味着你可以改变特定实例的风格，或者你可以定义一个新的要应用的CSS类。

来源

2012-03-26 15:46:48 jhenderson2099

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

来源

2012-03-26 15:47:26

如果你使用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>

来源

2012-03-26 15:52:35 jbossini

，如果你定义的类

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

，你也可以使用删除类的功能要通过JavaScript来做到这一点

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

来源

2012-03-26 15:53:08

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

来源

2012-03-26 16:54:05 Pankaj

如何删除div背景？

回答

相关问题