• js 中 操作元素样式
    • 通过js修改元素内联样式（设置和读取的都是内联样式）
    • 获取当前元素显示的样式
      #box1 {width: 200px;height: 200px;background-color: aquamarine;}

      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);}}
  • js 中 事件对象
    • 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
    • 在这个事件对象中封装了当前事件相关的一切信息（鼠标的坐标、键盘那个键被按下，鼠标滚动的方向等）
    • 注意: 在ie8及以下浏览器中，响应函数触发时，不会传递事件对象。 事件对象是作为window对象的属性来存储的。
    • 以一个鼠标移入某个区域后显示x、y坐标为例子
      #areaDiv {width: 200px;height: 100px;border: black 3px solid;margin-bottom: 10px;}#showMsg {width: 200px;height: 30px;border: black 3px solid;}
      var areaDiv = document.getElementById('areaDiv');var showMsg = document.getElementById('showMsg');/* onmousemove 事件： 鼠标在元素中移动时触发 事件对象： 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数在这个事件对象中封装了当前事件相关的一切信息（鼠标的坐标、键盘那个键被按下，鼠标滚动的方向等） 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 = '';}
  • 鼠标移动事件，实现某个div跟随鼠标移动（复制代码运行直接看效果更直观）
    #box {position: absolute;width: 50px;height: 50px;background-color: #7FFFD4;}
    /*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';}