Home > Article > Web Front-end > How to clear the width of an element in jquery
How to clear the width of an element in jquery
- 青灯夜游Original
- 2022-11-02 19:58:101764browse
3 methods: 1. Use width() to set the width to 0, the syntax "$("specified element").width("0");"; 2. Use css() to set the width attribute The value of width is set to 0, the syntax is "$("specified element").css("width","0");"; 3. Use attr() to set the value of width to 0, the syntax is "$("specified element ").attr("style","width:0");".
The operating environment of this tutorial: windows7 system, jquery3.6.1 version, Dell G3 computer.
Clearing the width (width) of an element means clearing the width attribute (style) of the element (setting the attribute value to 0).
3 ways to clear element width (width) in jquery
1. Use width() to set the width to 0
width() method returns or sets the width of the matching element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-3.6.1.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#box").width("0");
});
});
</script>
<style>
p{
width: 100px;
height: 20px;
border: 1px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<p>一个段落</p>
<p id="box">一个段落</p>
<br><br><br>
<button>清除元素的宽度</button>
</body>
</html>
2. Use css() to set the value of the width attribute to 0
css() method can set the selected One or more style attributes of the element.
Syntax:
$(selector).css(name,value)
| Parameters | Description |
|---|---|
| name | Required. Specifies the name of the CSS property. This parameter can contain any CSS property, such as "color". |
| value |
Optional. Specifies the value of a CSS property. This parameter can contain any CSS property value, such as "red". If the empty string value is set, removes the specified attribute from the element. |
Just set name to "width" and value to "0".
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").css("width","0");
});
});
</script>
<style>
p{
width: 100px;
height: 20px;
border: 1px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<p>一个段落</p>
<p>一个段落</p>
<br>
<button>清除元素的宽度</button>
</body>
</html> 
Method 3: Use attr() to set the value of width to 0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").attr("style","width:0");
});
});
</script>
<style>
p{
width: 100px;
height: 20px;
border: 1px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<p>一个段落</p>
<br>
<button>清除元素的宽度</button>
</body>
</html>
[Recommended Learning: jQuery video tutorial, web front-end video】
The above is the detailed content of How to clear the width of an element in jquery. For more information, please follow other related articles on the PHP Chinese website!