JQuery中操作Css样式的方法

前端技术 2023/08/31 JavaScript

复制代码 代码如下:

//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属性

本文地址:https://www.stayed.cn/item/910

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。