js、jquery获取、设置元素属性与样式

javascript:

1: ele.style

只能获取写在元素标签中style属性中的值，

无法获取写在<style></style>、和<link href="xx.css">加载进来的样式属性

2:window.getComputedStyle("元素","伪类")

伪类eg: :before,没有则写为null

3:ele.currentStyle

是IE浏览器的一个属性，返回最终css样式

2、3均可以获取最终的css样式，但只能读，不能写，

需要设置相关值时，应该用ele,style

最终可以写成通用函数：

见此链接：

jquery:

1: attr() 用来获取、设置元素属性 【removeAttr()删除相关属性】

2: val() 设置获取value值， html() 获取设置html，text()获取设置text

3:addClass(className) 【removeClass()】

4:css()

5:宽高相关：

(1)height() height(val) innerHeight() outerHeight()

具体见此：

6:位置相关：

(1)offset() 获取匹配元素在当前窗口的相对偏移，只对可见元素有效

eg $("#btn").offset().top

(2)position() 获取匹配元素相对父元素的偏移，只对可见元素有效

eg: $("#btn").position().top

(3)scrollTop() 获取匹配元素相对滚动条顶部的偏移，对可见元素和滚动元素均有效

(4)scrollTop(val) 设置垂直滚动条顶部偏移为该值，对可见元素和滚动元素均有效

(5)scrollLeft() scrollLeft(val) 类似于上个

注意：

（1）因为一些常用属性例如宽高等，用attr(width) 和css(width)是获取不到的

因此只能选用5,6的方法

（2）1、2 attr(‘value’)和val()的区别：.val()主要用来获取表单中的值，能获取到针对text,hidden可输入的文本框的值

而attr(value)可获取到html元素中所设置的属性value的值，不能动态的获取如 input type="text"的文本框手动输入的值

（3）css()和attr()的区别：css()操作的是样式，而attr()操作的是元素的属性，当然有些属性和样式中的属性是一样的，但一般用css获取设置样式