JavaScript基础知识补习（7）

补昨天内容的地方（记得补啊兄弟）

---

操作内联样式

若css的样式名有 -
* 在js中这种名称不合法 eg：background-color
* 去掉 - ，改为驼峰命名法
*
* borderTopWidth = border-top-width
*
* 我们通过style属性设置的样式都是内联样式
eg. alert(box1.style.width); 获取内联样式

---

获取元素当前显示的样式
语法： 元素.currentStyle.样式名
若没设置值则返回默认值，注意currentStyle只支持IE

在其他浏览器中可以使用
getComputedStyle()这个方法来获取当前元素
* 需要两个参数
* 第一个：要获取样式的元素
* 第二个：可以传递一个伪元素，一般写null
*
该方法会返回一个对象，对象中封装了当前元素对应的样式
如果获取的样式没有设置值，则会获取到真实的值，而不是默认值

比如：没有设置width的值，他不会获取到auto而是长度。

但是该方法不支持ie8及以下浏览器，

通过getComputedStyle和currentStyle都是只读的不支持修改

//正常浏览器
                aler(getComputedStyle(box1,null).backgroundColor);

//IE8
                alert(box1.currentStyle.backgroundColor);

那么我们想要兼容怎么搞 ， 那就可以自己设计一个函数

                    /*
                     * 定义一个函数，用来获取元素额当前的样式
                     * 参数
                     *      obj 要获取样式的元素
                     *      name 要获取的样式
                     * 
                     */
                function getStyle(obj,name){
//                  alert(getComputedStyle);  //native code(本地代码)
                    if(window.getComputedStyle){
                        return getComputedStyle(obj,null)[name]; //定义对象成员！的用法 [name]
                    }else{
                        return obj.currentStyle[name];
                    }
                        }

---

其他样式相关属性
clientWidth
clientHeight
* - 这两个属性可以获取元素的可见宽度和高度
* - 这些属性都是不带px的，返回的都是一个数字，可以直接进行计算
* 这些属性都是只读的
.
element.offsetHeight，element.offsetWidth
获取元素的整个的宽度和高度。包括内容区，内边距和边框

offsetParent
* 获取当前元素的定位父元素
* 获取到离当前元素最近的开启了定位的祖先元素
* 如果所有的祖先元素都没有开启定位则返回body

offsetLeft
* -当前元素相对于其定位元素的水平偏移量
offsetTop
* -当前元素相对于其定位元素的垂直偏移量

scrollHeight 获取元素整个滚动区的一个高度
scrollWidth 。。。

scrollLeft 水平滚动条滚动的距离
scrollTop 垂直

//当满足scrollHeight - scrollTop == clientHeight
//说明垂直滚动条滚动到底了
//当满足scrollWidth - scrollLeft == clientWidth
//说明水平滚动条滚动到底了

---

onmousemove
* 该事件会在鼠标在元素中移动时被触发
*
* 事件对象
* -当事件的响应函数触发时，浏览器每次都会将一个事件对象作为实参传递响应函数
* 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘那个按键被按下···

---

在ie8中，响应函数被触发时，浏览器不会传递事件对象
* 在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的

//                  解决事件兼容
//                  if(!event){
//                      event = window.event;
//                  }

                    event = event || window.event; 

获取坐标

         //clientX 获取鼠标指针的水平坐标
         //clientY 获取鼠标指针的垂直坐标
         var x = event.clientX;
         var y = event.clientY;