如何用jquery 控制css样式

html-css015

如何用jquery 控制css样式,第1张

//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")

//7设置多个样式

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

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

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

prop和attr的根本区别在于:

1、对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>

这个例子里<a>元素的DOM属性有“href、target和class",这些属性就是<a>元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在IDE里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用prop方法。

2、对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

<a href="#" id="link1" action="delete">删除</a>

这个例子里<a>元素的DOM属性有“href、id和action”,很明显,前两个是固有属性,而后面一个“action”属性是我们自己自定义上去的,<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时,建议使用attr方法。

扩展资料

attr() 方法设置或返回被选元素的属性值。

根据该方法不同的参数,其工作方式也有所差异。

当该方法用于返回属性值,则返回第一个匹配元素的值。

当该方法用于设置属性值,则为匹配元素设置一个或多个属性/值对

简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情

。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

参考资料:百度百科-jQuery

百度百科-attr()