Home > Article > Web Front-end > How to modify the style attribute in jquery to hide elements
How to modify the style attribute in jquery to hide elements
- 青灯夜游Original
- 2022-05-17 19:44:413064browse
Two hiding methods: 1. Use css() to control the display style, the syntax is "element object.css('display','none')"; 2. Use attr() to control the display style, the syntax is " Element object.attr('style','display:none')".
The operating environment of this tutorial: windows7 system, jquery3.2.1 version, Dell G3 computer.
Two methods for jquery to modify the style attribute to hide elements
css() method
attr() method
1. Use css() method
Use css() to control display or visibility Style, syntax:
元素对象.css('display','none');//隐藏 元素对象.css('visibility','hidden');//元素隐藏
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.2.1.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
.start{
color: peru;
}
</style>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").css('display','none');//隐藏
$("div").css('visibility','hidden');//元素隐藏
});
});
</script>
</head>
<body>
<p>一个p元素</p>
<div>一个div元素</div>
<p>一个p元素</p>
<button>隐藏元素</button>
</body>
</html>
#2. Use attr() method
Use attr() to control display or visibility style, syntax:元素对象.attr('style','display:none');//隐藏 元素对象.attr('style','visibility:hidden');//元素隐藏Example:
$(document).ready(function() {
$("button").click(function() {
$("p").attr('style','display:none');//隐藏
$("div").attr('style','visibility:hidden');//元素隐藏
});
});
jQuery video tutorial、webfront-end video】
The above is the detailed content of How to modify the style attribute in jquery to hide elements. For more information, please follow other related articles on the PHP Chinese website!