jquery操作元素样式的方法有哪些

本教程操作环境: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>

1.gif

2、使用css()方法

$(document).ready(function() {  $("button").click(function() {   $("img").css("width","250px");  }); });

2.gif

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>

2.gif

【推荐学习:jQuery视频教程、web前端入门视频】

商匡云商
Logo
注册新帐户
对比商品
  • 合计 (0)
对比
0
购物车