JS中操作样式的属性

壹、回顾前面两篇文章的内容：

一、通过 object.style.style name  来读取和设置CSS样式。  

设置：object.style.style name =  style value     读取 ： alert (object .style.style name);

通过这个方法都是读取和设置的内联样式，存在着一定缺陷。

二、通过getComputedStyle(obj,null) 来读取元素当前显示的样式。这个是window的方法，这个方法会返回一个对象，它封装了当前元素对应的样式。不支持IE8以及以下的版本。

      通过object.Currentstyle.style name 来读取IE8及以下的浏览器版本。

      兼容问题：window.getcomputedstyle?get computedstyle(obj,null)[style name]:object.currentstyle.style name

          都是只读的！！读取的是带单位的属性值。例如：100px

 

贰、今天学习其它的方法。

1、

                      clientWidth

                      clientHeight

                     - 这两个属性可以获取元素的可见宽度和高度

                     - 这些属性都是不带px的，返回都是一个数字，可以直接进行计算

                     - 会获取元素宽度和高度，包括内容区和内边距

                     - 这些属性都是只读的，不能修改

2、

                     * offsetWidth

                     * offsetHeight

                     *  - 获取元素的整个的宽度和高度，包括内容区、内边距和边框

3、                    

                     * offsetParent

                     *  - 可以用来获取当前元素的定位父元素

                     * - 会获取到离当前元素最近的开启了定位的祖先元素

                     *      如果所有的祖先元素都没有开启定位，则返回body

4、

                     * offsetLeft

                     *  - 当前元素相对于其定位父元素的水平偏移量

                     * offsetTop

                     *  - 当前元素相对于其定位父元素的垂直偏移量

5、

                     * scrollWidth

                     * scrollHeight

                     *  - 可以获取元素整个滚动区域的宽度和高度

6、

                    * scrollLeft

                     *  - 可以获取水平滚动条滚动的距离

                     * scrollTop

                     *  - 可以获取垂直滚动条滚动的距离

7、

                    当满足scrollHeight - scrollTop == clientHeight

                              整个高度    滚动条滚动的距离    可见的高度    说明垂直滚动条滚动到底了

                    

                    当满足scrollWidth - scrollLeft == clientWidth

                    说明水平滚动条滚动到底

disabled 一般为禁用input ，设置为true时表示禁用它  false时表示不禁用。

 

事件对象，当时间的响应函数被触发时，浏览器每次都会将一个事件作为对象，作为实参传递进响应函数。

例如：onmousemove  鼠标在元素移动时被触发。

        client x  可以获取鼠标指针的水平位置

         client y 可以获取鼠标指针的垂直位置

event 事件，

例：object.οnmοusemοve= function(event){

          var x = event.clientx;

          var y  = event.clienty;}

兼容问题：event =event||window.event    解决事件对象的兼容性问题。

 

事件冒泡的问题。

个人理解：给一个子元素和它的父元素及父元素的父元素绑定一个事件，在子元素事件被触发时，浏览器会默认执行父元素的事件的函数。 事件的触发顺序自内向外，这就是事件冒泡

取消冒泡：event.cancelbubble = turn      没有兼容性问题。