壹、回顾前面两篇文章的内容:
一、通过 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 没有兼容性问题。