极客教程HTML 如何从JavaScript中修改CSS的display属性
在本文中，我们将介绍如何利用JavaScript来修改HTML元素的CSS display属性。display属性用于确定元素在页面中的显示方式，可以控制元素是显示还是隐藏。
阅读更多：HTML 教程
修改元素的display属性
要修改元素的display属性，需要使用JavaScript来操作元素的样式。我们可以通过getElementById()方法获取到要修改的元素，然后使用style.display属性来设置新的display值。
下面是一个示例，演示了如何通过点击按钮来控制一个元素的显示和隐藏：
<!DOCTYPE html>
<html>
<head>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<button onclick="toggleElement()">点击切换元素的显示</button>
<div id="myElement">这是一个要控制显示的元素。</div>
<script>
function toggleElement() {
var element = document.getElementById("myElement");
if (element.style.display === "none") {
element.style.display = "block";
} else {
element.style.display = "none";
}
}
</script>
</body>
</html>
在上面的例子中，我们首先定义了一个CSS类.hidden，它的display属性被设置为none，表示元素被隐藏。然后，我们创建了一个按钮，给它绑定了一个点击事件toggleElement()。在这个函数中，我们通过getElementById()方法获取到了id为myElement的元素，并判断它的display值。如果display为none，则将其设置为block，使其显示；如果display不为none，则将其设置为none，使其隐藏。
使用classList来切换display值
除了直接操作元素的style.display属性之外，我们还可以使用classList来切换元素的CSS类，从而修改display属性。
classList是DOM元素的一个属性，它包含了一系列操作类的方法，例如add()、remove()、toggle()等。通过使用classList的toggle()方法，我们可以很方便地切换元素的CSS类，从而实现修改display属性的效果。
下面是一个示例，演示了如何使用classList来切换元素的CSS类，以达到修改display属性的目的：
<!DOCTYPE html>
<html>
<head>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<button onclick="toggleElement()">点击切换元素的显示</button>
<div id="myElement" class="hidden">这是一个要控制显示的元素。</div>
<script>
function toggleElement() {
var element = document.getElementById("myElement");
element.classList.toggle("hidden");
}
</script>
</body>
</html>
在上面的例子中，我们给myElement元素添加了hidden这个CSS类，使其初始时为隐藏状态。点击按钮后，调用了toggleElement()方法，该方法调用了classList.toggle()方法来切换hidden类。当元素没有hidden类时，toggle()方法会添加这个类，使元素隐藏；当元素已经有了hidden类时，toggle()方法会移除这个类，使元素显示。
总结
通过上述两种方法，我们可以在JavaScript中修改HTML元素的CSS display属性。第一种方法是直接操作元素的style.display属性，通过修改该属性的值来改变元素的显示方式。第二种方法是使用classList来切换元素的CSS类，从而改变display属性的值。两种方法各有优劣，根据具体情况选择合适的方法来实现目标。
以上是关于如何从JavaScript中修改CSS的display属性的介绍。希望本文能帮助读者理解和运用这一知识点，实现丰富多样的页面效果。