按鈕上綁定事件
<div id="a">abc</div>
<button id="test" >test</button>
<script>
// // 文檔對(duì)象
// let m=document.getElementById("a")
// //innerHTML找屬性
// alert(m.innerHTML)
function fn() {
alert("hello")
}
// document.getElementById("test").onclick=fn;
//不同寫(xiě)法
// document.getElementById("test").addEventListener("click",function () {
// alert("hello mrs")
// });
document.getElementById("test").addEventListener("click",()=> alert("hello mrs"))
</script>
獲得div位置 每個(gè)時(shí)間會(huì)調(diào)整其位置
let/var 多用let 用來(lái)聲明類型 ；；var可同時(shí)改變上面代碼
常量‘’，真假值ture/flas
類型
數(shù)值，真假值，字符串，對(duì)象類型
.style 用來(lái)獲得元素屬性
通過(guò)計(jì)算得出數(shù)值：
let x=window.getComputedStyle(m,null).left;
偏移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#a{
position: absolute;
left: 200px;
top: 300px;
height: 300px;
width: 300px;
background-color: red;
}
</style>
</head>
<body>
<div id="a">abc</div>
<button id="test" >test</button>
<script>
//獲得文檔熟悉感
let btn=document.getElementById("test")
//通過(guò)點(diǎn)擊事件獲得
btn.onclick=function () {
let m=document.getElementById("a");
//x.style.left
//獲得計(jì)算元素值
let x=window.getComputedStyle(m,null).left;
let y=window.getComputedStyle(m,null).top;
//將px換為一個(gè)數(shù)字類型對(duì)象
let a=Number.parseInt(x);
//對(duì)m對(duì)象下的元素樣式進(jìn)行改變
m.style.left=(a+100)+"px";
}
</script>
</body>
</html>
