Question

我有这段html / css，我需要用js按钮点击更改div样式，这样我的div就变得可见并且可点击了。我似乎做对了一切，但由于某种原因它没有用。

当我点击该按钮时，没有任何反应，任何人都可以帮忙吗？

<button type="button" id="letsgo" onclick="letitGo()">Process</button>
<div id="textualdiv">blah blah blah</div>

他们下面的脚本：

<script>
function letitGo()
{
    document.getElementById("textualdiv").style.opacity="1";
    document.getElementById("textualdiv").style.pointer-events="auto";
}
</script>

在单独的CSS文件中使用div样式：

#textualdiv {
    z-index:10;
    background-color:white;
    margin-bottom:0%;
    width:70%;
    text-align:center;
    height:50%;
    min-width:500px;
    top: 10%;
    display: block;
    margin: 0 auto !important;
    padding:0;
    position:relative;
    opacity:0;
    pointer-events: none;
    border-style:solid;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

Answer 1

CSS pointer-events属性在JavaScript中为elem.style.pointerEvents

改为使用

function letitGo()
{
document.getElementById("textualdiv").style.opacity="1";
document.getElementById("textualdiv").style.pointerEvents="auto";
}

JSFiddle - http://jsfiddle.net/dbxcsv9h/

Answer 2

正如Elipzer在我面前回应你一样。正确的答案是：

function letitGo()
{
document.getElementById("textualdiv").style.opacity="1";
document.getElementById("textualdiv").style.pointerEvents="auto";
}

请记住，当您想使用Javascript更改CSS属性时，您需要使用camelCase键入该属性的名称。

希望它可以帮到你！

单击按钮更改div css不起作用

2 个答案: