我只是想找出答案...为什么我必须单击2倍（而不是1次单击），直到文本第一次出现？您能帮我解决这个问题吗？谢谢！
function mudar() {
var x = document.getElementById("texto");
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}.escondido {
display: none;
}<button onclick=mudar()>EXIBIR E ESCONDER O TEXTO</button>
<p class="escondido" id="texto">Texto para exibir e esconder</p>您可以更改
if (x.style.display == "none") {
到
if (x.style.display === "" || x.style.display == "none") {
程序启动时，x.style.display的值不是"none"，它是空字符串。
只需添加：
|| x.style.display == ""
这应该可以正常工作。
function mudar() {
var x = document.getElementById("texto");
if (x.style.display == "none" || x.style.display == "") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}.escondido {
display: none;
}<button onclick=mudar()>EXIBIR E ESCONDER O TEXTO</button>
<p class="escondido" id="texto">Texto para exibir e esconder</p>这是因为样式最初的显示属性是一个空字符串“”。并且您的代码将直接跟随以其他方式阻止。您可以添加条件来检查显示属性值是否为空字符串。
function mudar() {
var x = document.getElementById("texto");
console.log(x.style.display)
if (x.style.display == "none" || x.style.display == "") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}.escondido {
display: none;
}<button onclick=mudar()>EXIBIR E ESCONDER O TEXTO</button>
<p class="escondido" id="texto">Texto para exibir e esconder</p>要获得显示属性，请使用getComputedStyle()，它“在应用活动样式表并解决这些值可能包含的所有基本计算之后，返回包含元素的所有CSS属性值的对象”
getComputedStyle()function mudar() {
var x = document.getElementById("texto");
var display = window.getComputedStyle(x).getPropertyValue('display');
if (display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}.escondido {
display: none;
}这是另一种方法，切换类，将样式与“业务逻辑”分离：
<button onclick=mudar()>EXIBIR E ESCONDER O TEXTO</button>
<p class="escondido" id="texto">Texto para exibir e esconder</p>为什么我必须单击2次（而不是单击1次]
因为是第一次，所以<html>
<head>
<style>
.escondido {
display: block;
}
.escondido-hidden {
display: none;
}
</style>
</head>
<body>
<button onclick=mudar()>EXIBIR E ESCONDER O TEXTO</button>
<p class="escondido escondido-hidden" id="texto">Texto para exibir e esconder</p>
<script>
function mudar() {
var x = document.getElementById("texto");
x.classList.toggle('escondido-hidden')
}
</script>
</body>
</html>等于空字符串。首次单击时，将运行x.style.display块，其显示设置为else。因此，'none'块仅在您单击两次时才运行
有两种方法可以解决此问题：
if是否等于空字符串或等于x.style.displaynonefunction mudar() {
var x = document.getElementById("texto");
if (!x.style.display || x.style.display === 'none') {
x.style.display = "block";
} else {
x.style.display = "none";
}
}.escondido {
display: none;
}<button onclick=mudar()>EXIBIR E ESCONDER O TEXTO</button>
<p class="escondido" id="texto">Texto para exibir e esconder</p>函数获得display的x属性值，该函数将在您首次单击该按钮时返回getComputedStyle而不是空字符串nonefunction mudar() {
var x = document.getElementById("texto");
if (getComputedStyle(x).getPropertyValue('display') == 'none') {
x.style.display = "block";
} else {
x.style.display = "none";
}
}.escondido {
display: none;
}