用dom操作样式和dom事件

 

1.样式表的操作
1.1获取样式表：
var cssRules = document.styleSheets[0].cssRules //DOM规范
document.styleSheets[0].rules //IE
1.2获取最终样式
var divEle = document.getElementById("divId");
var backgroundColor = divEle.currentStyle.backgroundColor; //IE
var backgroundColor = (document.defaultView.)getComputedStyle(divEle, null).backgroundColor; //DOM规范

2.DOM事件
eg1：
<button onclick="execute()">click</button>

function execute() {
console.info("执行js代码");
} //通过button的onclick属性
eg2：
<button id="btn">click</button>

var btnEle = document.getElementById("btn");
btnEle.onclick = function() {
console.info("执行js代码");
} //通过dom的onclick属性
3.事件流
3.1事件冒泡 从里到外
3.2事件捕获 从外到底
4.兼容性处理
var divEle = document.getElementById("div1");
if（document.addEventListener){
divEle.addEverntListener("click",函数名，ture/false）；//dom2
} else if（document.attachEvent）{
divEle.attachEvent（"onclick",函数名）；//IE
}
5..event对象
可以获取整个事件的所有信息
兼容性处理：
function(event) {
event = event || window.event;
}
6.鼠标事件
7.键盘事件
8.HTML事件

转载于:https://www.cnblogs.com/hejieng/p/5419526.html