javascript - 单击按钮更改 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() 是事件处理器