單擊按鈕時更改 CSS 樣式？

Question

我想在單擊按鈕時更改 div 元素上的一些 css 樣式屬性，但我沒有那么多經驗，也無法在網上找到任何幫助我的東西。 目前這就是我的代碼的樣子。

<button class="button1">Click</button>
<div class="popup_middle">
</div>
<div class="grayout">
</div>

我的 CSS 看起來像這樣

.grayout {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 99;
    visibility: hidden;
    background-color: #000;
    filter: alpha(opacity = 55);
    opacity:.80;
}

.popup_middle{
    position: fixed;
    background: url(../images/bg-food-order.jpg);
    border: none;
    top: 50%;
    left: 50%;
    width: 350px;
    height: 250px;
    margin-top: -125px;
    margin-left: -175px;
    z-index: 100;
    visibility: hidden;
}

請您給我一些建議或使用 JS 的代碼示例來解決我的問題。

提前致謝，大衛

Answer 1

就像是

<script type='text/javascript'>

$('.button1').click(function() { $('.popup_middle').hide().css('color', 'blue'); });

</script>

當您單擊按鈕時，將隱藏 popup_middle div 並將文本顏色設置為藍色。 click() 是事件處理程序

Answer 2

您使用getElementById它將查找具有 id 的元素。 您正在尋找的 div 有一個類，但沒有 id。 因此，當您運行您擁有的代碼時，沒有任何反應，因為 javascript 無法找到任何具有popup_middle id的popup_middle 。

要解決此問題，您可以將div更改為具有popup_middle的Id ，並且您的 CSS 應該具有#popup_middle 。

HTML：

<button onClick="document.getElementById('popup_middle').style.visibility='visible';">Cli‌ck</button>
<div id="popup_middle"></div>
<div class="grayout"></div>

CSS：

.grayout {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 99;
    visibility: hidden;
    background-color: #000;
    filter: alpha(opacity=55);
    opacity:.80;
}
#popup_middle {
    position: fixed;
    background: green;
    border: none;
    top: 50%;
    left: 50%;
    width: 350px;
    height: 250px;
    margin-top: -125px;
    margin-left: -175px;
    z-index: 100;
    visibility: hidden;
}

小提琴： http : //jsfiddle.net/eLJYZ/2/

Answer 3

因此，如果您想使用按鈕將 css 類樣式添加到文本中：=>

          <script>
            function changed(){
            document.getElementById("exp").classList.add("the class style name")};
          </Script>
              <div id="exp">
                <button onclick=" changed()">try it</button>
                <p onclick="changed()">hello world</p>

              </div>