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 的任何元素。

要解决此问题，您可以将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>

点击按钮更改CSS样式？

3 个答案: