JavaScript-js操作标签style相关

JavaScript操作页面标签的样式。
格式:
设置页面标签的样式 el.style.样式=属性值.
注意， style设置的的样式是内联样式， 优先级高。设置样式时，样式名称用驼峰方法命名的， 例如:border-radius 写成 el.style.borderRadius=“xxx”;

• 设置样式

	 box1.style.width = "200px";
     box1.style.height = "200px";
     box1.style.backgroundColor = "green";
     box1.style.borderBottomLeftRadius = "100px";
      box1.style.borderTopRightRadius = "100px";

获取标签样式属性值。
style.属性 获取的是标签的内联样式值， 即直接写在标签内部 style里的样式， 写在css里的获取不到。
getComputedStyle(标签,null).属性， 是用来获取标签当前的样式，第一个参数是标签，第二个是伪元素，第二个参数没有就填写null， getComputedStyle不兼容ie8及以下浏览器。
标签.currentStyle 用来获取标签的当前样式， 但是currentStyle只在ie浏览器中好使。
综上， 如果我我们要获取内联样式 可以用style.属性获取， 如果要获取当前的样式，无论是内联还是css里面写的， 就要用getComputedStyle和currentStyle了， getComputedStyle和currentStyle可以组合写成兼容浏览器获取样式值的方法， 如下。

• 获取当前样式兼容方法:
  

标签的常见属性 (以下属性均为只读,不带像素单位. 使用格式:element.xxx)

• clientHeight
  获取可见高度，包括内容区和内边距， 不包括边框，
• clientWidth
  获取可见宽度，包括内容区和内边距， 不包括边框，
• offsetHeight
  获取可见高度，包括内容区和内边距，包括边框，
• offsetWidth
  获取可见宽度，包括内容区和内边距，包括边框，
• offsetParent
  可以用来获取当前元素的定位父元素，上级一级一级的找， 没有的话就是body
• offsetLeft
  可以用来获取当前元素的相对于其定位父元素水平方向的距离
• offsetTop
  可以用来获取当前元素的相对于其定位父元素水平方向的距离

滚动条相关。
clientHeight/clientWidth 可以获得当前有滚动条的标签高度/宽度。
scrollHeight/scrollWidth获得滚动区域的高度或者宽度，即可滚动区域。
scrollLeft/scrollTop 获取水平/垂直滚动条滚动的距离，距离左侧/顶部。
滚动条滚动到底的情况:
scrollHeight-scrollTop==clientHeight ，即可滚动高度-距离顶部的高度等于可见高度的时候 ，证明滚动条已经滚动到最最底部了。

滚动事件监听
element.οnscrοll=function(){
}

	box2.onscroll=function(){
                console.log("滚动ing...距离顶部:"+box2.scrollTop+"px");
                if(box2.scrollHeight-box2.scrollTop==box2.clientHeight){
                    console.log("到底了亲.......");
                }
            }