目前为止，我们的dom一直都在操控html标签，也就是结构，但是还没开始操纵样式呢，接下来我们说一下使用dom操纵css。
文章目录
- 通过JS修改元素样式
- 通过JS读取样式
- 其他样式操作的属性
- 鼠标移入坐标练习
- 事件的传播
- 之前的
通过JS修改元素样式
语法：元素.style.样式名 = 样式值注意样式值是字符串。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 300px;
height: 300px;
background-color:red;
}
</style>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
box1.style.width = "400px";
box1.style.height = "400px";
};
};
</script>
</head>
<body>
<button id="btn">点我一下变大哦</button>
<div id="box1"></div>
</body>
</html>
注意：
- 如果CSS样式名中含有
-这种名称在JS中是不合法的，比如:backgroud-color - 需要将这种样式名修改为驼峰命名法，去掉
-然后将-后的字母大写。
box1.style.backgroundColor = "yellow";
我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过style属性修改的样式会优先显示。但是如果在样式中写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时会导致JS修改失效，所以尽量不要为样式添加!important。
通过JS读取样式
语法：元素.style.样式名，注意：通过style属性读取和设置的都是内联样式，无法读取样式表中的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 300px;
height: 300px;
background-color:red;
}
</style>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn");
var box1 = document.getElementById("box1");
btn.onclick = function(){
alert(box1.style.width);
};
};
</script>
</head>
<body>
<button id="btn">点我显示</button>
<br /><br />
<div id="box1"></div>
</body>
</html>
那要是有需要获取样式表里的样式呢？？
获取元素当前显示的样式:
- 语法：
元素.currentStyle.样式名，但是只有IE支持。 - 在其他浏览器中可以使用
getComputedStyle()这个方法来获取元素的当前德阳市，这个方法是window的方法，可以直接使用。需要两个参数：第一个：要获取样式的 元素，第二个：可以传递一个伪元素，一般都传null。该方法会返回一个对象，对象中封装了当前元素对应的样式。可以通过对象.样式名来读取样式，如果获取的样式没有设置，则会获取到真是的值，而不是默认值。比如：没有设置width，它不会获取到auto，而是一个长度。但是该方法不支持IE8及以下浏览器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 300px;
height: 300px;
background-color:red;
}
</style>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn");
var box1 = document.getElementById("box1");
btn.onclick = function(){
alert(getComputedStyle(box1,null).width);
};
};
</script>
</head>
<body>
<button id="btn">点我显示</button>
<br /><br />
<div id="box1"></div>
</body>
</html>
- 通过currentStyle和getCOmputedStyle()读取到的样式都是只读的。不能改，如果要修改必须通过style属性。
- 创造一个函数，普通浏览器和ie都可以使用：
function getStyle(obj,name){
if(window.getComputedStyle){
//正常浏览器，具有getComputedStyle()方法
return getComputedStyle(obj,null)[name];
}else{
//IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}
}其他样式操作的属性
-
clientWidth,clientHeight这两个属性可以获得元素的可见宽度和高度（包括内容区和内边距），这些属性都输不带px的返回的都是一个数字，可以直接进行计算。这些属性都是只读的，不能修改。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 300px;
height: 300px;
background-color:red;
}
</style>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn");
var box1 = document.getElementById("box1");
btn.onclick = function(){
/*
* clientWidth
* clientHeight
* 这两个属性可以获得元素的可见高低和宽度
*
*/
alert(box1.clientWidth);
};
};
</script>
</head>
<body>
<button id="btn">点我</button>
<br /><br />
<div id="box1"></div>
</body>
</html>
padding: 10px;添加内边距，可见宽度和可见高度增加，返回值也增大。
-
offsetWidth,offsetHeight可以获取元素整个的宽度和高度，包括内容区、内边框和边框。 -
offsetParent可以用来回去当前元素的定位父元素。它会获取到离当前元素最近的开启了定位的祖先元素。如果所有的祖先元素都没有开启定位，则会返回body。 -
offserLeft,offsetTop表示当前元素相对于其定位父元素的水平偏移量、垂直偏移量。 -
scrollWidth,scrollHeight可以获取元素滚动区域的宽度和高度。 -
scrollLeft,scrollTop可以获得水平、垂直滚动条滚动的距离。当满足scrollHeight - scrollTop == clientHeight或scrollWidth - scrollLeft == clientWidth说明垂直滚动条或水平滚动条滚动到底了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#info{
width: 300px;
height: 300px;
overflow: auto;
background-color: #BBFFAA;
}
</style>
<script type="text/javascript">
window.onload = function(){
var info = document.getElementById("info");
var input = document.getElementsByTagName("input");
info.onscroll = function(){
if(info.scrollHeight - info.scrollTop == info.clientHeight){
input[0].disabled = false;
input[1].disabled = false;
}
};
};
</script>
</head>
<body>
<h3>请开始注册，注意阅读完注册须知</h3>
<p id="info">
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
请务必认真阅读注册须知！！！
</p>
<input type="checkbox" name="" id="" value="" disabled="disabled"/>我已仔细阅读
<br />
<input type="submit" name="" id="" value="注册" disabled="disabled"/>
</body>
</html>效果：
鼠标移入坐标练习
效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#areaDiv{
border: 1px solid black;
height: 100px;
width: 300px;
}
#showMsg{
border: 1px solid black;
height: 50px;
width: 300px;
margin-top: 20px;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 当鼠标在areaDiv中移动时，在showMsg找那个显示鼠标的坐标
*/
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg");
/*
* onmousemove
* - 该事件会在鼠标在元素中移动时被触发
*
* 事件对象
* - 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为一个实参传递进响应函数
* - 在事件对象中，封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘的哪个键被按下，鼠标滚轮的方向
*/
areaDiv.onmousemove = function(event){
var x = event.clientX;
var y = event.clientY;
showMsg.innerHTML = "x = " + x+" , "+ "y = "+y;
//在showMsg中显示鼠标的坐标
};
};
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>但是，在IE8中，响应函数被触发时，浏览器不会传递对象。在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的。（可用 event = event || window.event 代替 envent ）
-
clientX和clientY用于获取鼠标在当前窗口的坐标。 -
pageX和pageY可以获取鼠标相对与当前页面的坐标。但是这两个属性在IE8中不支持，所以需要兼容IE8，则不要使用。
事件的传播
- 关于事件的传播，网景公司和微软公司有不同的理解。
微软公司认为事件应该是由内向外传播，也就是当事件触发时，应当先触发当前元素上的事件，然后再向当前元素的祖先元素传播，也就是说时间的冒泡阶段执行。
网景公司认为事件应该由外向内传播，也就是当事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后再向内传播给后代元素。
W3C综合了两家公司的方案，将事件传播分成了三个阶段：
- 捕获阶段：在捕获阶段时，从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件。
- 目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件。
- 冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件。
如果希望在捕获阶段触发事件，可以将addEventListener()的第三个参数设置为true，一般情况下我们不希望在捕获阶段触发事件，所以这个参数一般都是false。
IE8及以下的浏览器中没有捕获阶段。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
