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获取设置样式