jquery获取样式(jquery下载)
各位老铁们,大家好,今天由我来为大家分享jquery获取样式,以及jquery下载的相关问题知识,希望对大家有所帮助。如果可以帮助到大家,还望关注收藏下本站,您的支持是我们最大的动力,谢谢大家了哈,下面我们开始吧!
jQuery获取设置样式
css();方法
获取或设置样式
对以下html标签进行样式的获取和设置
css();方法设置参数,参数为要设置的样式名
可用驼峰命名也可用css命名方式。注意样式名需要加''
点击获取按钮,结果:
但是在IE浏览器里,用 console.log($('#div1').css('border'));可能会不显示或出现undefined。
在IE浏览器中,要获取边框这样的样式值,一定要记得给一个准确的边框值。例如:
console.log($('#div1').css('Border-top-width'));//2px
获取包含了多个DOM元素的jQuery对象的样式,只能获取到第一个DOM对象的样式。例如:
console.log($('div').css('width'));//200px
css(样式名,样式值);
设置的样式是行内样式
单样式里样式名必须在''里,宽高度单位px可不写,这时300可不加'',如果加px,则必须为'300px'
多样式里样式名可不加''。但是 background-color:'green'这样写报错。
给多个div一起设置样式
隐式迭代,把每一个div都设置了同样的样式
如何javascript获取css中的样式
1 Javascript获取页面的元素的样式常见的两个方法是 document.getElementById(),document.querySelector("");方法。
2在下面的实例中是使用Javascript来改变标签的背景颜色,使用的是document.querySelector()方法。代码可以直接复制到浏览器上面运行;document.querySelector("#demo").style.background="red";是获取元素,使用css改变标签的北京颜色;<button onclick="myFunction()">点我</button>是点击事件触发,点击之后有相应的代码执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript改变背景颜色</title>
</head>
<body>
<p id="demo">id="demo"的 p元素</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
document.querySelector("#demo").style.background="red";
}
</script>
</body>
</html>
3案例加载之后的页面效果截图:
4点击点我按钮之后,北京颜色变为红色的效果截图:
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程序设计有所帮助。
好了,本文到此结束,如果可以帮助到大家,还望关注本站哦!