JavaScript中的Css腳本

我想在javascript中顯示一條狀態消息，並希望在該消息中包含一些css。任何人都可以幫我解決這個問題嗎？JavaScript中的Css腳本

現在我有兩個名爲可用和不可用的css類可用我需要應用可用的css類和不可用我需要追加NotAvailable css類。

這裏是我的javascript代碼：

function OnSuccess(response) { 
     var mesg = $("#mesg")[0]; 

     switch (response.d) { 
      case "true": 
       mesg.style.color = "green"; 
       mesg.innerHTML = "Available"; 
       break; 
      case "false": 
       //     mesg.style.color = "red"; 
       mesg.innerHTML = "Not Available"; 
       break; 
      case "error": 
       //     mesg.style.color = "red"; 
       mesg.innerHTML = "Error occured"; 
       break; 
     } 
    } 
    function OnChange(txt) { 
     $("#mesg")[0].innerHTML = ""; 

    }

這是我的CSS：

.Available 
      { 
       position: absolute; 
       width: auto; 
       margin-left: 30px; 
       border: 1px solid #349534; 
       background: #C9FFCA; 
       padding: 3px; 
       font-weight: bold; 
       color: #008000; 
      } 

    .NotAvailable 
{ 
    position:absolute; 
    width:auto; 
    margin-left:30px; 
    border:1px solid #CC0000; 
    background:#F7CBCA; 
    padding:3px; 
    font-weight:bold; 
    color:#CC0000; 
    }

來源

2011-09-23 coder

一個類似的問題http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript – ZX12R

我不明白。爲什麼使用'.NotAvaiable'和'.Avaiable'類？使用'＃mesg'和'＃mesg.NotAvaiable'來默認使容器可用或不可用會更好嗎？然後你只需切換一個類，你的代碼就會更清晰。 – avall

當然我也會試試 – coder

mesg.addClass('Available'); 
mesg.removeClass('NotAvailable');

，反之亦然。

來源

2011-09-23 10:18:25

感謝您的所有寶貴答案 – coder

不客氣。順便說一句，你可以說在Stackoverflow通過接受答案與左邊的刻度線答案） –

是的，但我需要9分鐘接受按規則，因爲我有較少的聲譽。 – coder

您可以使用.addClass(cssClassName) ADN .removeClass(cssClassName)方法jQuery中。

事情是這樣的：

 switch (response.d) { 
     case "true": 
      mesg.removeClass('NotAvailable').addClass('Available'); 
      mesg.innerHTML = "Available"; 
      break; 
     case "false": 
      mesg.removeClass('Available').addClass('NotAvailable'); 
      mesg.innerHTML = "Not Available"; 
      break; 
     case "error": 
      mesg.removeClass('Available').addClass('NotAvailable'); 
      mesg.innerHTML = "Error occured"; 
      break; 
    }

我已經使用removeClass（的CssClass），然後addClass（className）已過時，因爲你正在使用相同的元素來改變其等級。你

也可以嘗試.toggleClass(cssClassName)

來源

2011-09-23 10:18:25

Lol我們真的想要重寫代碼的程度越來越高嗎？ – Dave

感謝您的所有寶貴答案 – coder

@Dave：只要我的鍵盤上有'CTRL'，'C'和'V'按鈕，在修改代碼時不會感到乏味。其實這也有助於OP。 –

這比您想象的要容易。你只需要那些innerHTML的行更改爲：

mesg.html("<div class='Available'>Available</div>"); 

mesg.html("<div class='Available'>Not Available</div>");

.html()僅僅是jQuery的設置的innerHTML更兼容的方式。而html確實意味着html ...所以你可以做任何你可以在常規網頁上做的事情！

來源

2011-09-23 10:19:11 Dave

在這種情況下：使用'.html（）;'函數（jQuery-function） – Snicksie

確實，這會稍微更正確：）我會更新答案。 – Dave

感謝您提供所有有價值的答案 – coder

jQuery還有一個.css()函數。也許這會訣竅？

或者你想添加一個類到你的mesg？在這種情況下：$("#mesg").addClass("classOfYourChoice");

來源

2011-09-23 10:19:28 Snicksie

感謝您的寶貴答案 – coder

JavaScript中的Css腳本

回答

相關問題