今天小编给大家分享一下jquery操作元素样式的方法是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
操作样式的方法有：1、css()，可设置元素的样式属性；2、height()，可设置元素的高度；3、width()，可设置元素的宽度；4、attr()，可通过控制元素的id、class、style属性来操作样式；5、addClass()等。
本教程操作环境：windows7系统、jquery1.10.2版本、Dell G3电脑。
jquery直接操作元素样式的方法
| CSS 属性 | 描述 |
|---|---|
| css() | 设置或返回匹配元素的样式属性。 |
| height() | 设置或返回匹配元素的高度。 |
| offset() | 返回第一个匹配元素相对于文档的位置。 |
| position() | 返回第一个匹配元素相对于父元素的位置。 |
| scrollLeft() | 设置或返回匹配元素相对滚动条左侧的偏移。 |
| scrollTop() | 设置或返回匹配元素相对滚动条顶部的偏移。 |
| width() | 设置或返回匹配元素的宽度。 |
1、css()
返回 CSS 属性值语法：
$(selector).css(name)设置 CSS 属性语法：
$(selector).css(name,value)2、height()
返回高度的语法：
$(selector).height()设置高度的语法：
$(selector).height(length)3、width()
返回宽度的语法：
$(selector).width()设置宽度的语法：
$(selector).width(length)示例：操作元素样式--修改元素宽度
1、使用width()方法
<!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" width="150"/><br>
<button>修改元素的宽度</button>
</body>
</html>
2、使用css()方法
$(document).ready(function() {
$("button").click(function() {
$("img").css("width","250px");
});
});
jquery间接操作元素样式的方法
在jquery中，可以通过操作元素属性来间接操作元素样式。
| 方法 | 描述 |
|---|---|
| addClass() | 向匹配的元素添加指定的类名。 |
| attr() | 设置或返回匹配元素的属性和值。 |
| prop() | 设置或返回被选元素的属性/值 |
| removeAttr() | 从所有匹配的元素中移除指定的属性。 |
| removeClass() | 从所有匹配的元素中删除全部或者指定的类。 |
| toggleClass() | 从匹配的元素中添加或删除一个类。 |
示例：使用attr()添加样式
当使用attr() 方法设置元素的style属性，即可给元素添加css样式。
<!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操作元素样式的方法是什么”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
