#1 围度相关属性height, offset, scrollTop等

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()