Html 初始状态下单击按钮两次显示的Div

在初始状态下，我需要点击阅读更多按钮两次，以显示下面的内容。奇怪-如何解决此问题？我只想单击“阅读更多”按钮一次，以显示其下方的内容

函数myFunction（）{
var x=document.getElementById（“myDIV”）；
var btnText=document.getElementById（“myBtn”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
btnText.innerHTML=“少读”；
}否则{
x、 style.display=“无”；
btnText.innerHTML=“阅读更多”；
}
}

#myDIV{
显示：无；
宽度：100%；
填充：50px0；
文本对齐：居中；
背景颜色：浅蓝色；
边缘顶部：20px；
}

单击“尝试”按钮在隐藏和显示DIV元素之间切换：

这是我的DIV元素。
阅读更多
注意：当“显示”属性设置为“无”时，元素不会占用任何空间

如果

myDiv

的

显示

样式为空，则应包括检查

函数myFunction（）{
var x=document.getElementById（“myDIV”）；
var btnText=document.getElementById（“myBtn”）；
如果（x.style.display==“无”| | x.style.display===”）{//注意这一行
x、 style.display=“block”；
btnText.innerHTML=“少读”；
}否则{
x、 style.display=“无”；
btnText.innerHTML=“阅读更多”；
}
}

#myDIV{
显示：无；
宽度：100%；
填充：50px0；
文本对齐：居中；
背景颜色：浅蓝色；
边缘顶部：20px；
}

单击“尝试”按钮在隐藏和显示DIV元素之间切换：

这是我的DIV元素。
阅读更多

注意：当“显示”属性设置为“无”时，元素不会占用任何空间。

它在两次单击中工作的原因是DOM已准备就绪，但脚本不知道div的样式是

display:none

有两种方法可以解决此问题：

使用

Window.getComputedStyle（）

方法在应用活动样式表并解析这些值可能包含的任何基本计算之后，返回一个包含元素所有CSS属性值的对象

通过这种方式，它将确保内容将显示在one单击中

演示：

函数myFunction（）{
var x=document.getElementById（“myDIV”）；
var displayDiv=window.getComputedStyle（x）.display；//此函数
var btnText=document.getElementById（“myBtn”）；
如果（displayDiv==“无”）{
x、 style.display=“block”；
btnText.innerHTML=“少读”；
}否则{
x、 style.display=“无”；
btnText.innerHTML=“阅读更多”；
}
}

#myDIV{
显示：无；
宽度：100%；
填充：50px0；
文本对齐：居中；
背景颜色：浅蓝色；
边缘顶部：20px；
}

单击“尝试”按钮在隐藏和显示DIV元素之间切换：

这是我的DIV元素。
阅读更多
注意：当“显示”属性设置为“无”时，元素不会占用任何空间

将

style=“display:none”

写入您的

。当前它首先转到其他部分，然后

display=“none”

被分配给div，因此在第二次单击后，它显示div刚刚完成-非常感谢您的帮助。