标签：知识点 style 样式 JavaScript 对象 事件 var document
- js 中 操作元素样式
- 通过js修改元素内联样式（设置和读取的都是内联样式）
- 获取当前元素显示的样式
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#box1 {
width: 200px;
height: 200px;
background-color: aquamarine;
}
</style>
<body>
<button type="button" id="btn1">点我下1</button>
<button type="button" id="btn2">点我下2</button>
<button type="button" id="btn3">点我下3</button>
<br><br>
<div id="box1">
</div>
</body>
<script type="text/javascript">
window.onload = function() {
var btn01 = document.getElementById("btn1");
var box01 = document.getElementById("box1");
btn01.onclick = function() {
/*
通过js修改元素内联样式:
语法: 元素对象.style.样式名 = 样式值
样式名： background-color 是不符合的， 需要改为驼峰命名： backgroundColor
注意： 这种方法设置和读取的都是内联样式
*/
box01.style.width = "400px";
box01.style.height = "400px";
box01.style.backgroundColor = "red";
}
/*
获取当前元素显示的样式：
语法: 元素对象.currentStyle.样式名 。 此方法只有IE浏览器支持
其他浏览器获取样式： getComputedStyle(元素对象,null).样式名 ;
*/
var btn2 = document.getElementById("btn2");
btn2.onclick = function() {
alert(box01.currentStyle.width);
}
var btn3 = document.getElementById("btn3");
btn3.onclick = function() {
var style_obj = getComputedStyle(box1, null);
alert(style_obj.width);
}
}
</script>
</html>
- js 中 事件对象
- 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
- 在这个事件对象中封装了当前事件相关的一切信息（鼠标的坐标、键盘那个键被按下，鼠标滚动的方向等）
- 注意: 在ie8及以下浏览器中，响应函数触发时，不会传递事件对象。 事件对象是作为window对象的属性来存储的。
- 以一个鼠标移入某个区域后显示x、y坐标为例子
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#areaDiv {
width: 200px;
height: 100px;
border: black 3px solid;
margin-bottom: 10px;
}
#showMsg {
width: 200px;
height: 30px;
border: black 3px solid;
}
</style>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
<script type="text/javascript">
var areaDiv = document.getElementById('areaDiv');
var showMsg = document.getElementById('showMsg');
/*
onm ousemove 事件： 鼠标在元素中移动时触发
事件对象： 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
在这个事件对象中封装了当前事件相关的一切信息（鼠标的坐标、键盘那个键被按下，鼠标滚动的方向等）
note: 在ie8及以下浏览器中，响应函数触发时，不会传递事件对象。 事件对象是作为window对象的属性来存储的。
*/
areaDiv.onmousemove = function(e) {
// 解决事件对象兼容性问题： 两种写法：
// if (!e) {
// e = window.e;
// }
e = e || window.e;
showMsg.innerHTML = 'x坐标：' + e.clientX + ',y坐标：' + e.clientY;
}
areaDiv.onmouseout = function() {
showMsg.innerHTML = '';
}
</script>
</html>
- 鼠标移动事件，实现某个div跟随鼠标移动（复制代码运行直接看效果更直观）
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#box {
position: absolute;
width: 50px;
height: 50px;
background-color: #7FFFD4;
}
</style>
<body style="height: 1200px;">
<div id="box">
</div>
</body>
<script type="text/javascript">
/*
clientX 和 clientY 是获取当前可见页窗口的坐标
pageX 和 pageY 是获取相对当前页面的坐标 （当页面可以往下滚动时，需要使用这个获取坐标）,但是在IE8中不支持
*/
document.onmousemove = function(e) {
/*
获取滚动条高度
IE和火狐不识别滚动条属于body的， 谷歌、edge可以识别。
IE和火狐认为滚动条属于html的。documentElement，但是edge识别不了html的滚动条
*/
var st = document.body.scrollTop || document.documentElement.scrollTop;
e = e || window.e;
var box = document.getElementById('box');
box.style.left = e.clientX + 'px';
box.style.top = e.clientY + st + 'px';
}
</script>
</html>
标签：知识点,
style,
样式,
JavaScript,
对象,
事件,
var,
document
From： https://www.cnblogs.com/study-hmz/p/16617197.html