css()
1.css可以设置属性，也可以读取属性的值，有以下几种形式：
# 读取
css(properyName: string) // 读取一个属性值
css(properNames: array) // 读取多个属性值
# 设置
css(properName: string, value: string) // 设置一个属性值
css(properName: string, function: fun) // 通过函数设置（jquery1.4）
css(properties: object) // 使用对象的形式设置
2.注意点
- 获取的围度值，永远返回px, 虽然样式中可能是em, rem, 百分比等
- 不同的浏览器返回的颜色相关的值可能不同，比如chrome一般以rgb, rgba形式返回
- css()忽略
！important声明 - css(perpertyName, '') 可来消除内联样式的属性，而不能消除样式表中的样式
3.示例
$('#box').css('width') // 获取值
$('#box').css(['width', 'height'])
// {width: "960px", height: "298px"}
# wScroll 是个变量
$('.logo').css({
'transform': 'translate(0px, ' + wScroll/2 + '%)'
});
# css(property, '+=200') 同时支持这种形式
# 点击增加200
$('#box').click(function() {
$(this).css('width', '+=200')
})
# 函数的形式
$('#box').click(function() {
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2
},
height: function(index, value) {
return parseFloat(value) * 1.2
}
})
})
# 忽略 ！important
$('#box').css('color', 'red !important')
offset()
jquery1.2版本添加
获取第一个元素当前的坐标，或者设置每个元素的坐标（相对于document）
offset() // 返回一个对象｛top: **, left: **｝
offset( coordinates )
offset( function ) // 返回一个包含top,left的对象
示例：
# 获取
$('p').offset; // {top: 205, left: 10}
# 设置
$('p:last').offset({top: 10, left: 30})
相关属性： height(), position()等
position()
这个函数返回相对于最近的父容器的偏移，并且只读；注意offset()可读可写，同时是相对与document的偏移
$(elm).position => {top: **, left: **}
示例：
<div>
<p> hello </p>
</div>
div
padding: 15px
p
margin-left: 15px
$('p:first').positon // {top: 15, left: 15}
height(),innerHeight(), outHeight
获取第一个匹配元素的高度或设置所有元素高度，返回的是数字，不包含单位
在介绍之前，先说说这3个之间的差异：
- height(): 表示 content 的高度
- innerHeight(): 表示 content + padding 的高度,注意padding有上或下，或上下这几种情况
- outerHeight(): 表示 content + padding +border的高度
需要注意的是 box-sizing 属性对content,padding,border的影响
另外 css('height') 也可以获取元素的高度， 推荐使用这个方法获取高度，只不过css('height')返回的是字符串带单位，比如'200px'
示例：
<div id="box"></div>
#box
width: 200px
height: 200px
background: green
padding: 10px
border: 5px solid black
$('#box').height() // 200
$('#box').innerHeight() // 200+10*2 = 220
$('#box').outerHeight() // 200+10*2+5*2=230
$('#box').css('height') // '200px'
如果对#box添加上 box-sizing: border-box
#box
// ...
box-sizing: border-box
#值得注意的是$('#box').css('height')并不受影响
$('#box').height() // 200-10*2-5*2 = 170
$('#box').innerHeight() // 200-5*2 = 190
$('#box').outerHeight() // 200
$('#box').css('height') // '200px'
设置高度
height(value: string|number) 用数字表示默认单位px
height(function(index, height))=> String|Number
返回要设置的高度，this指向当前元素
scrollTop()
获取当前滚动条垂直方向的位置或者设置滚动条垂直位置
scrollTop()
scrollTop(value: Number)
这个属性在判断滚动条在什么位置来出发滚动事件非常有用
比如：
$(window).on('scroll', function() {
// 当滚动到一定位置时讲img设置为可见
if ($(img).offset().top < $(window).scrollTop()) {
$(img).css({
'display': 'block'
})
}
})
另外还有scrollLeft()
