如何使用 jQuery 将 CSS 显示属性更改为无或阻止
答案：使用jQuery css()方法
您可以使用 jQuery css() 方法将 CSS 显示属性值更改为 none 或 block 或任何其他值。 css() 方法将样式规则直接应用于元素，即内联。
以下示例将更改按钮单击时 DIV 元素的显示：
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Change CSS display Property to none or block</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
#myDiv{
padding: 20px;
background: #abb1b8;
margin-top: 10px;
}
</style>
<script>
$(document).ready(function(){
// Set div display to none
$(".hide-btn").click(function(){
$("#myDiv").css("display", "none");
});
// Set div display to block
$(".show-btn").click(function(){
$("#myDiv").css("display", "block");
});
});
</script>
</head>
<body>
<button type="button" class="hide-btn">Display none</button>
<button type="button" class="show-btn">Display block</button>
<div id="myDiv">#myDiv</div>
</body>
</html>或者，如果不想关心元素的 display 属性的初始值，但想在其初始值和无初始值之间切换，则可以简单地使用 jQuery show()、hide() 或仅 toggle() 方法。 下面的例子展示了它是如何工作的：
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Toggle CSS display of an Element</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
#myDiv{
padding: 20px;
background: #abb1b8;
margin-top: 10px;
}
</style>
<script>
$(document).ready(function(){
// Hide div by setting display to none
$(".hide-btn").click(function(){
$("#myDiv").hide();
});
// Show div by removing inline display none style rule
$(".show-btn").click(function(){
$("#myDiv").show();
});
// Toggle div display
$(".toggle-btn").click(function(){
$("#myDiv").toggle();
});
});
</script>
</head>
<body>
<button type="button" class="hide-btn">Hide</button>
<button type="button" class="show-btn">Show</button>
<button type="button" class="toggle-btn">Toggle</button>
<div id="myDiv">#myDiv</div>
</body>
</html>FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答：
Advertisements