jquery 根据div样式class取元素

jQuery操作css的元素样式

1.访问匹配元素的样式属性

来个小案例：

//宽高都是200px，背景颜色红色;
怎么获取div的属性值呢：
$("#div").css("width")//这就可以获取到宽的值
console.log($("#div").css("width"))//打印一下看看结果

结果出来了：

那怎么把宽和颜色改变一下呢：

$("#div").css("width"，"300px")//这样在属性后边跟个值就可以了，宽就变成300px了；
$("#div").css("background"，"yellow")//这样背景颜色就变成了黄色；
$("#div").css({"width":"300px","background":"yellow"})//这是一个组合的写法是不是要比上边简单；
回调函数的写法：
$("#div").click(function() {
$(this).css({
width: function(index, value) {
return parseFloat(value) * 2;
},
height: function(index, value) {
return parseFloat(value) * 2;
}
});
});
//这是一个点击事件每当点击div的时候它本身都会放大2倍；
2.css位置操作
2.1 offset([coordinates])获取匹配元素在当前视口的相对偏移
案例：
获取元素在当前视口的相对偏移：
$("#div").offset();//这样就可以获取到偏移值；
console.log($("#div").offset());//怎么也得打印一下看看结果啊 ；

打印结果：

当然能够获取值肯定还是能够赋值的：

$("#div").offset({left：50,top:100})//这样就可以了 引号是可以不用加的，最后结果是距离视口左边50px，上边100px；
2.2 position()获取获取匹配元素相对父元素的偏移
注意到没有position后边()里边没有中括号[]这个是只能获取不能赋值的；
使用方法：
$("p").position()//这样就可以获取到距离父元素左边和上边的距离了；
scrollTop([val])获取匹配元素相对滚动条顶部的偏移
使用方法：
$("div.demo").scrollTop(300);//滚动距离顶部300px；
$("div.demo").scrollTop(0);//这样就是在顶部了 也可以说回到顶部；
scrollLeft([val])获取匹配元素相对滚动条左部的偏移
使用方法：
同上；
css尺寸操作：
3.1 height([val|fn])：
$("div").height()//这是获取当前元素的高不算边框的和隐藏部分；
$("div").haight(function(n,c){
return c+10;
})
//这是一个函数使用方法，这样div本身的高就增加10px；
3.2 width([val|fn])：
同上！
3.3 innerHeight()：
$("div").innerHeight()//这是获取当前元素的高和隐藏和空白部分；
3.4 innerWidth():
同上！
3.5 outerHeight([options]):
$("#div").outerHeight()//这样使用是默认为fales 只获取当前高度；
$("#div").outerHeight(true)//这样使用不仅获取当前高度还获取了空白 边框 隐藏部分；
3.6 outerWidth():

同上！