JQuery中操作Css样式的方法

红太狼 2022-08-05 01:30 177阅读 0赞

# 本篇文章主要是对JQuery中操作Css样式的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助 #

复制代码

代码如下:

**//1、获取和设置样式**

$("\#tow").attr("class")获取ID为tow的class属性

$("\#two").attr("class","divClass")设置Id为two的class属性。

**//2、追加样式**

$("\#two").addClass("divClass2")为ID为two的对象追加样式divClass2

**//3、移除样式**

$("\#two").removeClass("divClass")移除 ID为two的对象的class名为divClass的样式。

$(\#two).removeClass("divClass divClass2")移除多个样式。

**//4、切换类名**

$("\#two").toggleClass("anotherClass") //重复切换anotherClass样式

**//5、判断是否含有某项样式**

$("\#two").hasClass("another")==$("\#two").is(".another");

**//6、获取css样式中的样式**

$("div").css("color") 设置color属性值. $(element).css(style)

//设置单个样式

$("div").css("color","red")

//设置多个样式

$("div").css(\{fontSize:"30px",color:"red"\})

$("div").css("height","30px")==$("div").height("30px")

$("div").css("width","30px")==$("div").height("30px")

**//7.offset()方法**

//它的作用是获取元素在当前视窗的相对偏移，其中返回对象包含两个属性,即top和left 。

//注意：只对可见元素有效。

var offset=$("div").offset();

var left=offset.left;         //获取左偏移

var top=offset.top;        //获取右偏移

//8、position()方法

//它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，它返回的对象也包括两个属性即top和left。

**//9、scrollTop()方法和scrollLeft()方法**

$("div").scrollTop();        //获取元素的滚动条距顶端的距离。

$("div").scrollLeft();         //获取元素的滚动条距左侧的距离。

**//10、jQuery中的 toggle和slideToggle 方法，都可以实现对一个元素的显示和隐藏。区别是：**

//toggle：动态效果为从右至左。横向动作。

//slideToggle：动态效果从下至上。竖向动作。

//比如想实现一个树由下至上收缩的动态效果，就使用slideToggle就ok了。

$('input').attr("readonly",true)//将input元素设置为readonly  
$('input').attr("readonly",false)//去除input元素的readonly属性  
$('input').attr("disabled",true)//将input元素设置为disabled  
$('input').attr("disabled",false)//去除input元素的disabled属性

#### 您可能感兴趣的文章: ####

*  [CSS+Jquery实现页面圆角框方法大全][CSS_Jquery]
 *  [jQuery的显示和隐藏方法与css隐藏的样式对比][jQuery_css]
 *  [JQuery结合CSS操作打印样式的方法][JQuery_CSS]
 *  [jquery修改网页背景颜色通过css方法实现][jquery_css]
 *  [jQuery修改CSS伪元素属性的方法][jQuery_CSS]
 *  [jQuery CSS()方法改变现有的CSS样式表][jQuery CSS_CSS]
 *  [jQuery的css()方法用法实例][jQuery_css 1]
 *  [jQuery使用CSS()方法给指定元素同时设置多个样式][jQuery_CSS 1]
 *  [jQuery的css() 方法使用指南][jQuery_css_]

[CSS_Jquery]: http://www.jb51.net/article/21572.htm
[jQuery_css]: http://www.jb51.net/article/42202.htm
[JQuery_CSS]: http://www.jb51.net/article/44784.htm
[jquery_css]: http://www.jb51.net/article/50738.htm
[jQuery_CSS]: http://www.jb51.net/article/52992.htm
[jQuery CSS_CSS]: http://www.jb51.net/article/54934.htm
[jQuery_css 1]: http://www.jb51.net/article/58898.htm
[jQuery_CSS 1]: http://www.jb51.net/article/62843.htm
[jQuery_css_]: http://www.jb51.net/article/65316.htm