jquery添加css样式 改变jquery对象的css
大家好,今天小编来为大家解答以下的问题,关于jquery添加css样式,改变jquery对象的css这个很多人还不知道,现在让我们一起来看看吧!
jquery怎么添加css样式
可以用jquery中的css()方法;
css()有两个参数。第一个参数是必选参数,一般是指css样式中的属性。第二个参数是可选参数,一般是指css样式中属性的值。当只有第一个参数是,则是指获取该属性的值。如果也有第二个参数,那就是表示改变属性的值。
示例如下:
<!doctypehtml>
<html>
<head>
<metacharset='utf-8'/>
<title></title>
<scripttype="text/javascript"language="javascript"src='jquery.js'></script>
<scriptlanguage='javascript'>
$(function(){
$('#btn1').click(function(){
//css()为一个参数
vardivWid=$('#div-box').css('width');
alert(divWid);
});
$('#btn2').click(function(){
//css()为两个参数
vardivWid=$('#div-box').css('background','#00f');
});
})
</script>
<styletype="text/css">
#div-box{width:200px;height:100px;background:#f00;}
</style>
</head>
<body>
<divid="div-box"></div>
<inputtype='button'id='btn1'value='提取'/>
<inputtype='button'id='btn2'value='改变'/>
</body>
</html>
jQuery给元素添加样式的方法详解
本文实例讲述了jQuery给元素添加样式的方法。分享给大家供大家参考,具体如下:
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属性
希望本文所述对大家jQuery程序设计有所帮助。
如何用jquery或者js来自定义css
关于定义CSS需要声明:类不能以数字开头
具体如下:
div{height:30px;border:1px#cccsolod;margin-top:10px}
.div1{}
.div2{}
.color-red{background-color:red}<divclass="div1">我是第一个层</div>
<divclass="div2">我是第二个层</div>利用jQ改变某一个容器的属性,有如下两种方法:
1、直接将内联样式CSS定义在jQ内:
$(".div2").css("background-color","red");2、调用外部样式CSS,利用jQ获取类:
$(".div2").addClass("color-red");解释:
第1种方式,获取带有div2样式的容器,将背景为红色的样式直接以style="background-color:red"的方式直接斌到div2的容器内;
第2种方式,获取带有div2样式的容器,再用jQ给div斌上color-red这个类,以改变div的样式
希望以上对你有帮助
关于本次jquery添加css样式和改变jquery对象的css的问题分享到这里就结束了,如果解决了您的问题,我们非常高兴。