Home > Article > Web Front-end > What are the methods for manipulating element styles in jquery?
Methods to operate styles: 1. css(), set the style attribute of the element; 2. height(), set the height of the element; 3. width(), set the width of the element; 4. scrollLeft() , set the offset of the element relative to the left side of the scroll bar; 5. scrollTop(), set the offset of the element relative to the top of the scroll bar; 6. attr(), operate the style by controlling the id, class, and style attributes of the element; 7. prop(), operates the style by controlling the style and other attributes of the element.
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
jquery method of directly operating element styles
| Description | |
|---|---|
| Set or return the style attribute of the matching element. | |
| Sets or returns the height of the matching element. | |
| Returns the position of the first matching element relative to the document. | |
| Returns the position of the first matching element relative to the parent element. | |
| Set or return the offset of the matching element relative to the left side of the scroll bar. | |
| Sets or returns the offset of the matching element relative to the top of the scroll bar. | |
| Sets or returns the width of the matching element. |
1. css()
Return CSS property value syntax:$(selector).css(name)Set CSS property syntax:
$(selector).css(name,value)
2. height()
The syntax for returning the height:$(selector).height()The syntax for setting the height:
$(selector).height(length)
3. width()
The syntax to return the width:$(selector).width()The syntax to set the width:
$(selector).width(length)
Example: Manipulate element style--Modify Element width
1. Use the width() method
<!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() {
$("img").width("200px");
});
});
</script>
</head>
<body>
<img src="1.jpg" style="max-width:90%"/ alt="What are the methods for manipulating element styles in jquery?" ><br>
<button>修改元素的宽度</button>
</body>
</html>
2. Use the css() method
$(document).ready(function() {
$("button").click(function() {
$("img").css("width","250px");
});
});
jquery method of indirectly operating element style
In jquery, you can pass Manipulate element properties to indirectly manipulate element styles.| Description | |
|---|---|
| Add the specified element to the matched element class name. | |
| Sets or returns the attributes and values of the matching element. | |
| Set or return the attribute/value of the selected element | |
| Remove the specified attribute from all matching elements. | |
| Remove all or specified classes from all matching elements. | |
| Adds or removes a class from the matched element. |
<!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({"style":"border: 5px solid paleturquoise;"});
$("div").attr("style", "border: 5px solid paleturquoise;width: 200px;");
});
});
</script>
</head>
<body>
<div>hello</div>
<br>
<button>给div元素添加css样式</button>
</body>
</html>
jQuery video tutorial, web front-end introductory video]
The above is the detailed content of What are the methods for manipulating element styles in jquery?. For more information, please follow other related articles on the PHP Chinese website!