更改后类名恢复到原始状态 [英] Class name reverts to original state after change

问题描述

我正在尝试使用 CSS 和 Javascript 创建类似灯箱的效果.我通过它的 id (OverlayContainer) 获取一个元素，它会改变它的类名以适应现在的深色背景.我已经设置了代码，它检查元素 (OverlayContainer) 的类名值以查看类名是设置为非活动(正常背景)还是活动(较暗).但是，当我按下提交按钮更改状态时，它似乎会更改类一秒钟(屏幕一瞬间变暗)，然后又恢复到原始状态(OverlayInactive).如果有人对这种情况有任何解释，请回复.

I am trying to create a Lightbox-like effect with CSS and Javascript. I'm getting an element by it's id (OverlayContainer) and it will change it's classname to accomodate the dark background for now. I have set up the code in a way that it checks classname value of the element (OverlayContainer) to see whether the classname is set to inactive(normal background) or active (darker). However when i press the submit button to change the state it appears to change classes for a second (screen gets darker for a split second) but then reverts back to original state (OverlayInactive). If anyone has any kind of explanation for this happening please respond.

这是我的 CSS 代码:

Here is my CSS code:

.OverlayBoxInactive {
    background-color: rgba(0, 0, 0, 0);

    position: absolute;
    width: 0%;
    height: 0%;

    top: 0px;
    left: 0px;
}

.OverlayBoxActive {
    background-color: rgba(0, 0, 0, 0.85);

    position: absolute;
    width: 100%;
    height: 100%;

    top: 0px;
    left: 0px;
}

这是我的 Javascript 代码:

and here is my Javascript code:

function ActivateOverlay() {

    var overlayBox = document.getElementById("OverlayContainer");
    var elementClassName = overlayBox.className;

    if (elementClassName == "OverlayBoxInactive") {
        overlayBox.setAttribute("class", "OverlayBoxActive");
        //alert('Overlay Activated');
    } else if (elementClassName == "OverlayBoxActive") {
        overlayBox.setAttribute("class", "OverlayBoxInactive");
        //alert('Overlay Inactivated');
    }

}

提前致谢，

-现实

编辑帖子:http://jsfiddle.net/bk5e9t0e/

推荐答案

您的代码无法正常工作，因为:

Your code was not working because:

• 您正在使用输入 type=submit [因此您获得了刷新页面的感觉]，应该是 type=button 或 return false； 在点击处理程序中
• 您正在调用函数 ActivateOverlay，该函数的定义晚于调用本身.

• You were using input type=submit [so you were getting a refresh page kind of feel], which should be type=button or return false; in click handler
• You were calling function ActivateOverlay which was defined later than the call itself.

在 jsFiddle 中找到您的解决方案

Find your solution here in jsFiddle

<script>
    function ActivateOverlay() {
        //alert('Overlay Activated');

        var overlayBox = document.getElementById("OverlayContainer");
        var elementClassName = overlayBox.className;

        if (elementClassName == "OverlayBoxInactive") {
            overlayBox.setAttribute("class", "OverlayBoxActive");
            //alert('Overlay Activated');
        } else if (elementClassName == "OverlayBoxActive") {
            overlayBox.setAttribute("class", "OverlayBoxInactive");
            //alert('Overlay Inactivated');
        }
    }
</script>
<div id="OverlayContainer" class="OverlayBoxInactive"></div>
<div class="main"></div>
<fieldset>
    <form>
        <input type="button" onclick="ActivateOverlay();return false" value="Hit Me"></input>
    </form>
</fieldset>
<script type="text/javascript" src="index.js"></script>

http://jsfiddle.net/4queag8m/

这篇关于更改后类名恢复到原始状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！