如何刪除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背景？

回答

相關問題