DOM对CSS的操作、事件（Event）、事件的冒泡（Bubble）DOM对CSS的操作
- 读取和修改内联样式
- 使⽤style属性来操作元素的内联样式
- 读取内联样式：
语法：元素.style.样式名
- 例⼦：
元素.style.width
元素.style.height
- 注意：如果样式名中带有-，则需要将样式名修改为驼峰命名法
将-去掉，然后-后的字母改⼤写
- ⽐如：background-color --> backgroundColor
border-width —> borderWidth
- 修改内联样式：
语法：元素.style.样式名 = 样式值
- 通过style修改的样式都是内联样式，由于内联样式的优先级⽐较⾼，
所以我们通过JS来修改的样式，往往会⽴即⽣效，
但是如果样式中设置了!important，则内联样式将不会⽣效。
- 读取元素的当前样式
- 正常浏览器
- 使⽤getComputedStyle()
- 这个⽅法是window对象的⽅法，可以返回⼀个对象，这个对象中保存着当前元素⽣效样式
- 参数：
1.要获取样式的元素
2.可以传递⼀个伪元素，⼀般传null
- 例⼦：
获取元素的宽度
getComputedStyle(box , null)[“width”];
- 通过该⽅法读取到样式都是只读的不能修改
- IE8
- 使⽤currentStyle
- 语法：
元素.currentStyle.样式名
- 例⼦：
box.currentStyle["width"]
- 通过这个属性读取到的样式是只读的不能修改
- 其他的样式相关的属性
注意：以下样式都是只读的
clientHeight
- 元素的可见⾼度，指元素的内容区和内边距的⾼度
clientWidth
- 元素的可见宽度，指元素的内容区和内边距的宽度
offsetHeight
- 整个元素的⾼度，包括内容区、内边距、边框css去掉滚动条
offfsetWidth
-
整个元素的宽度，包括内容区、内边距、边框
offsetParent
- 当前元素的定位⽗元素
- 离他最近的开启了定位的祖先元素，如果所有的元素都没有开启定位，则返回body
offsetLeft
offsetTop
- 当前元素和定位⽗元素之间的偏移量
- offsetLeft⽔平偏移量 offsetTop垂直偏移量
scrollHeight
scrollWidth
- 获取元素滚动区域的⾼度和宽度
scrollTop
scrollLeft
- 获取元素垂直和⽔平滚动条滚动的距离
判断滚动条是否滚动到底
- 垂直滚动条
scrollHeight - scrollTop = clientHeight
- ⽔平滚动
scrollWidth - scrollLeft = clientWidth
事件（Event）
- 事件对象
- 当响应函数被调⽤时，浏览器每次都会将⼀个事件对象作为实参传递进响应函数中，
这个事件对象中封装了当前事件的相关信息，⽐如：⿏标的坐标，键盘的按键，⿏标的按键，滚轮的⽅向。。
- 可以在响应函数中定义⼀个形参，来使⽤事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，⽽是作为window对象的属性保存
onmousemove
- 该事件将会在⿏标在元素中移动时被触发
事件对象
- 当事件的响应函数被触发时，浏览器每次都会将⼀个事件对象作为实参传递进响应函数,
在事件对象中封装了当前事件相关的⼀切信息，⽐如：⿏标的坐标 键盘哪个按键被按下 ⿏标滚轮滚动的⽅向。。。
在IE8中，响应函数被触发时，浏览器不会传递事件对象，
在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
解决事件对象的兼容性问题
event = event || window.event;
clientX可以获取⿏标指针的⽔平坐标
cilentY可以获取⿏标指针的垂直坐标
clientX和clientY
⽤于获取⿏标在当前的可见窗⼝的坐标
div的偏移量，是相对于整个页⾯的
pageX和pageY可以获取⿏标相对于当前页⾯的坐标
但是这个两个属性在IE8中不⽀持，所以如果需要兼容IE8，则不要使⽤
- 例⼦：
元素.事件 = function(event){
event = event || window.event;
};
元素.事件 = function(e){
e = e || event;
};
- 事件的冒泡（Bubble）
- 事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发。- 事件的冒泡⼤部分情况下都是有益的，如果需要取消冒泡，则需要使⽤事件对象来取消
- 可以将事件对象的cancelBubble设置为true，即可取消冒泡
- 例⼦：
元素.事件 = function(event){
event = event || window.event;
event.cancelBubble = true;
};
为s1绑定⼀个单击响应函数
var s1 = ElementById("s1");
event = event || window.event;
alert("我是span的单击响应函数");
//取消冒泡
//可以将事件对象的cancelBubble设置为true，即可取消冒泡
event.cancelBubble =true;
};
/
/为box1绑定⼀个单击响应函数
var box1 = ElementById("box1");
event = event || window.event;
alert("我是div的单击响应函数");
event.cancelBubble =true;
};
//为body绑定⼀个单击响应函数
lick=function(){
alert("我是body的单击响应函数");
};
使div可以跟随⿏标移动
//获取box1
var box1 = ElementById("box1");
//绑定⿏标移动事件
//解决兼容问题
event = event || window.event;
//获取滚动条滚动的距离
/*
* chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
* ⽕狐等浏览器认为浏览器的滚动条是html的，
*/
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
//var st = document.documentElement.scrollTop;
//获取到⿏标的坐标
/*
* clientX和clientY
*  ⽤于获取⿏标在当前的可见窗⼝的坐标
* div的偏移量，是相对于整个页⾯的
*
* pageX和pageY可以获取⿏标相对于当前页⾯的坐标
*  但是这个两个属性在IE8中不⽀持，所以如果需要兼容IE8，则不要使⽤
*/
var left = event.clientX;
var　top = event.clientY;
//设置div的偏移量
box1.style.left = left + sl +"px";
p = top + st +"px";
};
var box2 = ElementById("box2");
event = event || window.event;
event.cancelBubble =true;
};

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。