1.事件：
?<div>
? ? ? ? 我是div
? ? </div>
? ? <script>
? ? ? ? let div = document.querySelector('div');
? ? ? ? /* div是一個(gè)dom對(duì)象
? ? ? ? .onclick相當(dāng)于給對(duì)象添加了一個(gè)屬性
? ? ? ? 屬性值是一個(gè)函數(shù)，點(diǎn)擊就會(huì)觸發(fā) */
? ? ? ? /* div.onclick = function (){
? ? ? ? ? ? alert('你好')
? ? ? ? } */
? ? ? ? /* 鼠標(biāo)移上的時(shí)候 */
? ? ? ? div.onmouseover = function(){
? ? ? ? ? ? div.style.background = '#ccc'
? ? ? ? }
? ? ? ? /* 鼠標(biāo)移開 */
? ? ? ? div.onmouseout = function(){
? ? ? ? ? ? div.style.background = 'none'
? ? ? ? }
? ? ? ? /* 鼠標(biāo)按鈕被按下 */
? ? ? ? div.onmousedown = function(){
? ? ? ? ? ? alert('鼠標(biāo)按下時(shí)反應(yīng)')
? ? ? ? }
? ? ? ? /* 鼠標(biāo)抬起時(shí)反應(yīng) */
? ? ? ? div.onmouseup = function(){
? ? ? ? ? ? alert('鼠標(biāo)抬起時(shí)反應(yīng)')
? ? ? ? }
? ? </script>
2.添加className：
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? .bg{
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? background-color: beige;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div>
? ? ? ? 我是div1
? ? </div>
? ? <script>
? ? ? ? let div = document.querySelector('div');
? ? ? ? /* 添加className */
? ? ? ? div.className = 'bg';
? ? ? ? div.onclick = function(){
? ? ? ? ? ? div.className = ''
? ? ? ? }
? ? </script>
3.獲取元素樣式：
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
</head>
<body>
? ? <div style="width: 200px;height: 50px;background-color: rebeccapurple;">我是div</div>
? ? <script>
? ? ? ? let div = document.querySelector('div');
? ? ? ? /* 在行內(nèi)樣式上獲取樣式 */
? ? ? ? console.log(div.style.height);
? ? ? ? /* style是獲取不到在行內(nèi)樣式上或者外部樣式上的樣式的 */
? ? ? ? console.log(div.style.color.fontSize);
? ? ? ? /* window.getComputedStyle可以獲取行內(nèi)棺亭，內(nèi)部虎眨，外部所以樣式
? ? ? ? 但是獲得color是rgb格式的，獲取的是background所有格式 */
? ? ? ? console.log((window.getComputedStyle(div,null).fontSize));
? ? ? ? console.log((window.getComputedStyle(div,null).color));
? ? ? ? console.log((window.getComputedStyle(div,null).height));
? ? </script>
獲取元素樣式練習(xí)：
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? .bg{
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? border: 1px solid #ccc;
? ? ? ? }
? ? ? ? .bg2{
? ? ? ? ? ? background-color: red;
? ? ? ? ? ? color: #fff;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <!-- 一個(gè)按鈕點(diǎn)擊一下出現(xiàn)一個(gè)div镶摘，里面寫著我是div嗽桩，
? ? ? ? .bg 是內(nèi)部樣式 有寬200px 高200px 和 1px #CCC 灰色邊框
? ? ? ? 使用JS給div添加上classname bg
? ? ? ? classname.bg2 紅色背景 白字
? ? 鼠標(biāo)移入div顯示.bg2
? ? ?，鼠標(biāo)移出div顯示原來的樣子凄敢，點(diǎn)擊div可以獲取
? ? div的背景色 ?和 color 顏色-->
? ? <button onclick="fn()">點(diǎn)我</button>
? ? <script>
? ? ? ? let btn = document.querySelector('button')
? ? ? ? function fn(){
? ? ? ? ? ? let div = document.createElement('div');
? ? ? ? ? ? let divtext = document.createTextNode('我是div')
? ? ? ? ? ? let body = document.querySelector('body')
? ? ? ? ? ? div.appendChild(divtext);
? ? ? ? ? ? body.appendChild(div)
? ? ? ? ? ? div.className = 'bg';
? ? ? ? ? ? div.onmouseover = function(){
? ? ? ? ? ? div.className = 'bg bg2'
? ? ? ? }
? ? ? ? div.onmouseout = function(){
? ? ? ? ? ? div.className = 'bg'
? ? ? ? }
? ? ? ? div.onmousedown = function(){
? ? ? ? ? ? let b = window.getComputedStyle(div,null).background
? ? ? ? ? ? alert(b)
? ? ? ? }
? ? ? ? }
? ?</script>
4.屬性：
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? .div1{
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? padding: 10px;
? ? ? ? ? ? margin: 5px;
? ? ? ? ? ? border: 3px solid #ccc;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 20px;
? ? ? ? ? ? top: 10px;
? ? ? ? }
? ? ? ? .c{
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? background-color: slateblue;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 30px;
? ? ? ? ? ? left: 30px;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="div1">
? ? ?<div class="c">
? ? <button onclick="getScroll()">獲得滾動(dòng)條頂部的距離</button>
? ? ?</div>
? ? </div>
? ? <script>
? ? ? ? let divDom = document.querySelector('div')
? ? ? ? console.log(window.getComputedStyle(divDom,null).width);
? ? ? ? /*offsetWidth = content 寬度+左右padding+左右border ?*/
? ? ? ? console.log(divDom.offsetWidth);
? ? ? ? /* clientWidth = content 寬度+左右padding 不加border */
? ? ? ? console.log(divDom.clientWidth);
? ? ? ? /* 正常文檔流下 offsetLeft = body的margin-left+divDom的margin-left */
? ? ? ? /* 脫離文檔流的情況下 offsetLeft(25) = divDom的left(20)+divDom的margin-left */
? ? ? ? /* 正常文檔流下offsetTop 就是offsetTop(8) = body 的 margin-top(8) */
? ? ? ? console.log(divDom.offsetLeft);
? ? ? ? console.log(divDom.offsetTop);
? ? ? ? /*offsetParent 自己相對(duì)于(父元素)偏移 */
? ? ? ? console.log(divDom.offsetParent );
? ? ? ? let c = document.getElementsByClassName('c')[0];
? ? ? ? /* c是絕對(duì)定位 是相對(duì)于divDom偏移的 所以他的偏移父元素是divDom */
? ? ? ? console.log(c.offsetParent);
? ? ? ? /* offsetParent 如果子元素的父元素已經(jīng)是定位的元素碌冶，那么他的offsetParent
? ? ? ? 就是已經(jīng)定位(relative,absolute,fixed)的父元素，如果不是就是body */
? ? ? ?function getScroll(){
? ? ? ? ? ?/* 獲取滾動(dòng)條距離頂部的高度 */
? ? ? ? ? ?console.log(document.documentElement.scrollTop);
? ? ? ?}
? ? ? ?/* 滾動(dòng)條滾動(dòng)事件 */
? ? ? ?document.onscroll = function(){
? ? ? ? ? ?console.log(document.documentElement.scrollTop);
? ? ? ?}
? ? </script>
</body>
