Home >Web Front-end >Front-end Q&A >How to modify the hidden attribute in jquery
How to modify the hidden attribute in jquery
- 青灯夜游Original
- 2022-03-11 15:45:543385browse
Method: 1. Use attr(), the syntax is "element object.attr("hidden", value)"; 2. Use prop(), the syntax is "element object.prop("hidden", value) "; 3. Use removeAttr(), the syntax is "element.removeAttr("hidden")".
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
The hidden attribute specifies that the element is hidden. Hidden elements will not be displayed. If this attribute is used, the element will be hidden.
jquery modifies the hidden attribute
1. Use the attr() attribute to set the value of the hidden attribute
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("div").attr("hidden",false);
});
});
</script>
</head>
<body>
<p>测试文字-p元素</p>
<div hidden>测试文字-div元素</div>
<p>测试文字-p元素</p>
<button>修改hidden属性 </button>
</body>
</html> 
2. Use the prop() attribute to set the value of the hidden attribute
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("div").prop("hidden",false);
});
});
</script>
</head>
<body>
<p>测试文字-p元素</p>
<div hidden>测试文字-div元素</div>
<p>测试文字-p元素</p>
<button>修改hidden属性 </button>
</body>
</html>The operation effect is the same as method 1
3. Use the removeAttr() attribute to delete the hidden attribute
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("div").removeAttr("hidden");
});
});
</script>
</head>
<body>
<p>测试文字-p元素</p>
<div hidden>测试文字-div元素</div>
<p>测试文字-p元素</p>
<button>修改hidden属性 </button>
</body>
</html>The operation effect is the same as method 1
[Recommended learning: jQuery video tutorial, web Front-End Video】
The above is the detailed content of How to modify the hidden attribute in jquery. For more information, please follow other related articles on the PHP Chinese website!