1、对样式的操作
//1,获取事件源
var oDiv = document.getElementById('box');
//2.事件
oDiv.onclick = function() {
//3.事件驱动 业务
console.log(oDiv.style);
// oDiv.style.backgroundColor = 'green';
oDiv.style.width = '400px';
oDiv.style.float = 'left';
}
2、对标签属性的操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 42px; height: 70px; background: url(./images/icon-slides.png) no-repeat -84px 0; /*background-position: -82px 0;*/ } </style> </head> <body> <div class="box"></div> <img src="./images/购物车.png" width="100" alt="" id="shop"> <script> /* var oDiv = document.getElementsByClassName('box')[0]; oDiv.onmouseover = function() { this.style.backgroundPosition = '0 0'; } oDiv.onmouseout = function() { this.style.backgroundPosition = '-84px 0'; } */ var isHover = true; document.getElementById('shop').onclick = function() { if (isHover) { this.src = './images/购物车-hover.png'; this.className = 'app'; this.alt = '哈哈哈'; this.title = '哈哈哈'; this.id = 'app'; isHover = false; }else{ this.src = './images/购物车.png'; isHover = true; } // this.setAttribute(name: DOMString, value: DOMString) // console.log(this.getAttribute('src')); // console.log(this.src); // this.setAttribute('src', './images/购物车-hover.png'); } </script> </body> </html>
3、控制元素显示隐藏的方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .child{ width: 200px; height: 200px; background-color: green; } .hidden{ display: none; } </style> </head> <body> <button id="btn">隐藏</button> <div class="box"> <div class="child" id="child"></div> </div> <!-- 1.样式属性 display:none|block 2.通过控制标签属性className 对类型添加 移除 3.DOM创建 销毁 创建销毁 --> <script> var oChild = document.getElementById('child'); // document.getElementById('btn').onclick = function() { // oChild.style.display = 'none'; // oChild.className +=' hidden'; oChild.className = oChild.className + ' hidden'; console.log(oChild.className); } </script> </body> </html>
4、对值的操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .child{ width: 200px; height: 200px; background-color: green; } .hidden{ display: none; } </style> </head> <body> <button id="btn"> 隐藏 </button> <input type="text" id="user" value = 'wusir'> <div class="box"> <div class="child" id="child"></div> </div> <!-- 1.样式属性 display:none|block 2.通过控制标签属性className 对类型添加 移除 3.DOM创建 销毁 创建销毁 --> <script> var oChild = document.getElementById('child'); //这个事件操作是异步（不会阻塞 不等待）的 document.getElementById('btn').onclick = function() { // oChild.style.display = 'none'; // oChild.className +=' hidden'; oChild.className = oChild.className + ' hidden'; console.log(oChild.className); console.log(this.innerText); console.log(this.innerHTML); // this.innerHTML += '<span>了么</span>'; this.innerText += '<span>了么</span>'; } console.log(document.getElementById('user').value); document.getElementById('user').value = 'alex'; </script> </body> </html>
5、dom的操作
<body> <div id="father"> <div id="laoda"></div> <div id="laoer"></div> </div> <script> var oLaoda = document.getElementById('laoda'); // console.log(oLaoda.nextSibling); // console.log(oLaoda.nextElementSibling); // 兼容性 // var a = oLaoda.nextElementSibling || oLaoda.nextSibling; // console.log(a); console.log(document.getElementById('father').children); console.log(oLaoda.parentNode); </script> </body>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button id="btn">隐藏</button> <div class="box" id="box"> <!-- <div class="child">alex</div> --> </div> <!-- 1.样式属性 display:none|block 2.通过控制标签属性className 对类型添加 移除 3.DOM创建 销毁 创建销毁 --> <script> setTimeout(function () { var oBox = document.getElementById('box'); //DOM的创建 子元素 节点 var oChild = document.createElement('div'); oChild.className = 'child'; oChild.style.width = '200px'; oChild.style.height = '200px'; oChild.style.background = 'red'; // 父.appendChild(子) oBox.appendChild(oChild); },5000) </script> </body> </html>
6、选项卡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .active{ background-color: red; } #aaa{ width: 50px; height:50px; background-color: yellow; position: relative; } .box{ width: 200px; height: 100px; background-color:red; position: absolute; top:50px; display: none; } </style> </head> <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <div id="aaa">alex <div class="box"></div> </div> <script> var oBtns = document.getElementsByTagName('button'); for(var i = 0; i < oBtns.length; i++){ oBtns[i].onclick = function() { for(var j = 0; j < oBtns.length; j++){ oBtns[j].className = ''; } this.className = 'active'; } } // onmouseover 当穿过父元素和子元素 会调用 // onmouseenter 只穿过父元素 document.getElementById('aaa').onmouseenter = function () { console.log(1111); this.children[0].style.display = 'block'; } document.getElementById('aaa').onmouseleave = function () { this.children[0].style.display = 'none'; } // onmouseenter // onmouseleave </script> </body> </html>