Home > Article > Web Front-end > How to display hidden elements with jquery attr()
How to display hidden elements with jquery attr()
- 青灯夜游Original
- 2021-11-16 14:30:533870browse
attr() method to display and hide elements: 1. Use the "$("element").attr("style","display:block");" statement to display the element; 2. Use "$ ("Element").attr("style","display:none");" statement hides the element.
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
In jquery, you can use the attr() method to add a display style to the styles attribute of an element to show or hide the element.
display:blockDisplayable elementsdisplay:noneHideable elements
Implementation code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#but1").click(function() {
$("div").attr("style","display: none;");
});
$("#but2").click(function() {
$("div").attr("style","display: block;");
});
});
</script>
<style>
div{
margin: 10px 0;
}
</style>
</head>
<body>
<div>hello</div>
<div>欢迎来到PHP中文网！</div>
<button id="but1">隐藏元素</button> <button id="but2">显示元素</button>
</body>
</html>
Related tutorial recommendations: jQuery video tutorial
The above is the detailed content of How to display hidden elements with jquery attr(). For more information, please follow other related articles on the PHP Chinese website!