如何用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")

//7设置多个样式

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

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

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

可以用jquery中的css()方法；

css()有两个参数。第一个参数是必选参数，一般是指css样式中的属性。第二个参数是可选参数，一般是指css样式中属性的值。当只有第一个参数是，则是指获取该属性的值。如果也有第二个参数，那就是表示改变属性的值。

示例如下：

<!doctype html>

<html>

<head>

$(function(){

$('#btn1').click(function(){

//css()为一个参数

var divWid=$('#div-box').css('width')

alert(divWid)

})

$('#btn2').click(function(){

//css()为两个参数

var divWid=$('#div-box').css('background','#00f')

})

</script>

#div-box {width:200pxheight:100pxbackground:#f00}

</style>

</head>

<body>

</body>

</html>

我这里本地测试过，这两种写法都是可以的，我这里测试过div及input的四种写法，为了效果明显，我将font-size设置为了44px.

首先，第一种写法，是div，id="searchStr"，然后给的是html，样式是color为red

然后，第二种写法，是下面的多个属性，是css({})，里面传入一个json对象，用法是不错的，但是有些属性，需要变成驼峰式的写法，比如font-size要换成fontSize，background-color等换成backgroundColor等。但是这种写法，我这里是支持的。

第三种写法，是input配合样式，我觉得这里你可能需要变更一下写法，需要把html换成val方法，因为input元素没有html，只有value属性，对应jquery中就是val方法。

如果继续使用html方法的话，输入框里没有文字，但是dom元素中是插入的

换成第四种，多个属性的话，使用val方法，也是有效果的，

如果继续使用html方法，可以看到虽然输入框里没有文字，但是输入框的大小明显被文字撑开了，所以设置的样式是有效果的。

最后，我这里使用的jquer是百度的压缩2.1.1版本，首先检查一下你使用的jquery的版本，然后去jQuery官方网站上确认一下该版本是否支持这种写法了，一般来讲应该支持的。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/tougao/6542277.html

如何用jquery 控制css样式

发表评论

评论列表（0条）