元素获取与事件绑定

来源:互联网 发布:业务数据分析师要求 编辑:程序博客网 时间:2024/06/06 05:18

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<title></title>

</head>

<body>

<divid="div1">

</div>

<scripttype="text/javascript">

// 元素获取

// 都是DOM

// html获取

// 通过id获取元素

// object 对象 万事万物皆对象

varoDiv1 = document.getElementById("div1");

// alert(oDiv1);

// 获取所有div

// a array数组

// 标签名获取元素

varaDiv = document.getElementsByTagName("div");

// alert(aDiv);

// 通过css获取

varoDiv2 = document.querySelector("#div1");

// alert(oDiv2);

varaDiv2 = document.querySelectorAll("div");

// alert(aDiv2);

// 我要做点什么

// 事件绑定

// 简单事件

// 1. 鼠标点击------onclick

oDiv1.onclick= function(){

// alert("恭喜你点击绑定成功");

oDiv1.style.backgroundColor= "blue";

oDiv1.style.transform= "translate(100px, 100px)";

};

// 2. 鼠标移入----onmouseover

oDiv1.onmouseover= function(){

// alert("鼠标移入")

};

// 3. 鼠标移出效果----onmouseout

oDiv1.onmouseout= function(){

// alert("鼠标移出");

};

</script>

</body>

</html>

0 0
原创粉丝点击