单击跨度后如何显示按钮？

Question

我想隐藏该按钮，并在单击后显示它。

我将如何证明这一点？

<textarea id="AtD_0" class="spellcheck_textarea " name="txtPosComment" 
rows="7" style="height: 129px;"></textarea>

<span id="AtD_1">
<span class="AtD_proofread_button"></span>
</span>

 <button type="button" id="btnNext" >Next1 </button>

/* css  */
.AtD_proofread_button 
{
   width: 126px;
   height: 30px;
   background-image: url('writing.gif');
   display: block;
   margin: 0;
   padding: 0;
}

Answer 1

首先将CSS设置为none

button#btnNext{
   display:none;
  }

在范围上应用onclick侦听器

<span class="AtD_proofread_button" onclick="showButton()"></span>

最后的功能：

function showButton(){
document.getElementById("btnNext").style.display = "block";
}

Answer 2

您可以通过多种方式隐藏和显示某些内容，例如：

1. display: none; 就像元素不在页面中一样。
2. visibility: hidden; 使元素完全透明。
3. position: absolute; 并更改top和left以将其移出屏幕。

您可以使用element.style.propertyName = value更改JavaScript中element.style.propertyName = value的样式。 例如：

document.getElementById("myButton").style.display = "none";