Wie div Hintergründe zu entfernen?

Question

Ich habe ein div-Element in Website-Markup wie folgt.

Ich habe es wie folgt eine CSS-Klasse zugewiesen.

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

nun nach einer Schaltfläche klicken ich nur den Hintergrund dieses div entfernen möge, und will keine Positionierung von Elementen im Innern zu manipulieren. Und übrigens benutze ich ASP.net, um diese Website zu erstellen. Wie kann ich das machen ?

Answer 1

Wenn Sie dies in einem serverseitigen Ereignis erreichen möchten, müssen Sie das runat="server"-Attribut zu Ihrem <div>-Element hinzufügen, und es wird ein id-Attribut benötigen. Dies wird es leicht machen, serverseitig zu ändern.

Sie benötigen eine Event-Handler-Methode in Ihrem Code-Behind für den Button klicken.

In diesem Event-Handler, so etwas wie

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

jedoch in Frage (dies ist die id Ihrer <div> ist "Container" annimmt), sagen Sie Sie Ihr Element ein Klasse zugewiesen haben . Wenn dies der Fall ist, funktioniert das obige möglicherweise nicht.Es könnte sein, am einfachsten einen anderen CSS-Klasse ohne dieses Hintergrundbild Regel zu definieren, und dann in der Code-Behind dies zu tun:

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

Answer 2

Jetzt mit reinem CSS.

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

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

prüfen diese http://jsfiddle.net/AX8tY/

Answer 3

Wie wäre es damit so etwas wie:

Wenn Ihr HTML so etwas wie dieses:

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

Dann so etwas wie dies Ihre JS aussehen könnte (dies setzt voraus, Sie verwenden auch jQuery):

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

EDIT: Ich habe gerade in Ihrem Kommentar gesehen, dass Sie eine serverseitige Ereignis verwenden möchten. Dies ist eine Client-seitige Lösung.

Answer 4

Sie müssen JavaScript (entweder direkt oder einige JavaScript-Framework wie jQuery) und stellen Sie den CSS-Stil

background:none 

Dies bedeutet, verwenden Sie den Stil der spezifischen Instanz verändern könnten oder könnten Sie eine neue definieren CSS-Klasse zum Anwenden

Answer 5

Mit einem einfachen Javascript als: onclick="javascript:getElementById('div_element_id').style.backgroundImage = '';" oder Sie können auch jQuery API verwenden.

Answer 6

Wenn Sie jQuery verwenden Sie so etwas wie dies versuchen könnten:

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

wenn Sie nicht jquery verwenden, sollten Sie eine Javascript-Funktion auf dem onClick-Ereignis implementieren, versuchen Sie so etwas wie:

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

Answer 7

, wenn Sie eine Klasse definiert

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

Sie können auch die remove Klasse Funktion

$('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"/>