使用Javascript更改CSS值不起作用

我正在嘗試爲我的網站開發聊天框。使用Javascript更改CSS值不起作用

<div class="chat_box1"> 
<div id="chat_box_bar"> 
    <p>(SOME PHP CODE HERE)</p> 
     <p id="close_chat" onclick="close_chat_box(1)">X</p> 

</div> 
</div>

我在想，如果我將顯示器設置爲「無」，以及一些文本點擊時纔可以更改爲「塊」。正如：

<li onclick='display_chat_box(chat_box_number(),"[email protected]")'>KAMAL</li>

JavaScript函數：

function display_chat_box(y,email) 
{ 
    switch (y) 
    { 
     case 1: 
     { 
      alert("hi"); 
      document.getElementsByClass("chat_box1")[0].style.display="block"; 
     } 
     case 2: 
     { 
      document.getElementsByClass("chat_box2")[0].style.display="block"; 
     } 
     case 3: 
     { 
      document.getElementsByClass("chat_box3")[0].style.display="block"; 
     } 
    } 
}

我已經插在第一種情況中，報警代碼，以檢查範圍內的代碼可以運行，而且它作爲警告對話框彈出時我運行網頁。

問題：display屬性不會從「none」更改爲「block」。不知道爲什麼，但它以前曾在另一臺PC上工作過。

變量 'Y' 獲得此功能的價值：

function chat_box_number() 
{ 
    if(n==3) 
     n=0; 
    n++; 
    return n; 
}

這裏的CSS代碼：

.chat_box1,.chat_box2,.chat_box3 
{ 
    display: none; 
    width: 20%; 
    position: fixed; 
    bottom:0; 
    margin-right: 10px; 
    border-style: solid; 
    border-width: thin; 
    height:30%; 
    font-family: comic sans ms; 
    font-size: 12px; 
}

請幫助。

來源

2013-03-26 kamal0808

你在哪裏定義變量「n」 – reinder 2013-03-26 07:18:14

你試過調試嗎？ – 2013-03-26 07:20:18

您的瀏覽器是否支持getElementsByClass？ – 2013-03-26 07:22:45

-1

如果你設置？...

whatever.style.display="block !important";

來源

2013-03-26 07:18:01 IJMorgado

我到現在也沒注意，直到但我不認爲你的switch語句是有效的JavaScript

當寫你應該這樣做的情況下，像下面這樣：

case 1: 
    whatever_you_want_to_do(); 
    break;

代替

case 1: 
{ 
    whatever_you_want_to_do(); 
}

而正確的功能使用是getElementsByClassName而不是getElementsByClass

來源

2013-03-26 07:24:43 reinder

這是有效的JavaScript。您可以將語句分組到任意位置：https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/block – 2013-03-26 07:32:08

但是，您仍然必須「休息」。 – reinder 2013-03-26 07:35:54

糟糕！是的，現在你明確指出了這一點。：-）接得好。 – 2013-03-26 07:40:59

使用Javascript更改CSS值不起作用

回答

相關問題