元素的样式设置

元素的样式有六种

1.对象.style

box.style.backgroundColor = 'blue'

2.对象.className

box.className = 'blue'

3.对象.setAttribute(“style”)

box.setAttribute('style', 'background-color:blue')

4.对象.setAttribute(“class”)

box.setAttribute('class', 'blue')

5.对象.style.setProperty(“Css属性”,“Css属性值”)

box.style.setProperty('background-color', 'blue')

6.对象.style.cssText

box.style.cssText = 'background-color:blue'

一、鼠标事件
单机事件 onclick 双击事件 ondblclick 移入事件 onmouseover 移出事件 onmouseout 进入事件 onmouseenter 离开事件 onmouseleave 按下事件 onmousedown 抬起事件 onmouseup 移动事件 onmousemove 获取焦点 onfocus 失去焦点 onblur
二、键盘事件 按下事件 onkeydown 抬起事件 onkeyup
三、浏览器事件 加载完成事件 onload 滚动事件 onscroll

任何事件都有内置对象event

box.onclick = function (event) {
// console.log(‘测试’);
console.log(event);
// 浏览器兼容写法
var event = event || window.event
// type 事件类型
console.log(event.type);
// target 目标对象
console.log(event.target);
console.log(event.target.id);

触发点距离浏览器左侧和上侧的距离
clientX和clientY：
pageX和pageY：包括滚动条滚动的距离