如何使用 jQuery 将 CSS 显示属性更改为无或阻止
答案:使用jQuery css()方法
您可以使用 jQuery css() 方法将 CSS 显示属性值更改为 none 或 block 或任何其他值。 css() 方法将样式规则直接应用于元素，即内联。
以下示例将更改按钮单击时 DIV 元素的显示:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery 将 CSS 显示属性更改为 none 或 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 切换元素的 CSS 显示</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(){
/* 通过将 display 设置为 none 来隐藏 div */
$(".hide-btn").click(function(){
$("#myDiv").hide();
});
/* 通过删除内联显示无样式规则显示 div */
$(".show-btn").click(function(){
$("#myDiv").show();
});
/* 切换 div 显示 */
$(".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 相关问题解答
以下是与此主题相关的更多常见问题解答:
