JavaScript操作元素教你改变页面内容样式
程序员文章站
2022-04-10 12:50:46
目录1、操作元素1.1、改变元素内容1.2、innertext和innerhtml的区别1.3、操作元素 修改元素属性1.4、分时显示时间案例1.5、表单的属性操作1.6、仿京东隐藏显示密码操作1.7...
1、操作元素
1.1、改变元素内容
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> </head> <body> <button>显示当前系统时间</button> <div>某个时间</div> <p>123</p> <script> // 1、当我们点击了安妮 div里面的文字会发生变化 // (1)、获取元素 var btn = document.queryselector('button'); var div = document.queryselector('div'); // (2)、注册事件 btn.onclick = function(){ div.innertext = getdate(); } function getdate(){ // 案例:获取当前系统时间 2021年11月24日 星期三 var date = new date(); var year = date.getfullyear(); var month = date.getmonth()+1; var dates = date.getdate(); var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']; var day = date.getday(); return '今天是:' + year + '年' + month + '月' + dates + '日 '+ arr[day]; } // 2、可以不用注册事件就显示事件 var p = document.queryselector('p'); p.innerhtml = getdate(); </script> </body> </html>
1.2、innertext和innerhtml的区别
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> </head> <body> <div></div> <p> 我是文字 <span>123</span> </p> <script> // innertext和ineerhtml的区别 // 1、innertext不识别html标签、innerhtml识别html标签 var div= document.queryselector('div'); div.innertext = '<strong>今天是:</strong>2021'; // innerhtml识别html标签 w3c标准 // div.innerhtml = '<strong>今天是:</strong>2021'; // 2、这两个属性是可读写的 可以获取元素里面的内容 var p = div.innerhtml = document.queryselector('p'); // innertext会去除空格和换行 console.log(p.innertext); console.log(p.innerhtml); </script> </body> </html>
1.3、操作元素 修改元素属性
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> </head> <body> <button id="ldh">刘德华</button> <button id='zxy'>张学友</button> <img src='images/ldh.jpg' alt="" title="刘德华"> <script> // 修改元素属性 src // 1、获取元素 var ldh = document.getelementbyid('ldh'); var zxy = document.getelementbyid('zxy'); var img = document.queryselector('img'); // 2、注册事件 处理程序 zxy.onclick = function(){ img.src = 'images/zxy.jpg'; img.title = "张学友"; } ldh.onclick = function(){ img.src = 'images/ldh.jpg'; img.title="刘德华"; } </script> </body> </html>
1.4、分时显示时间案例
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> <style> img{ width: 300px; } </style> </head> <body> <img src = "images/s.gif" alt=""> <div id="div">亲,上午好,好好写代码</div> <script> var img = document.queryselector('img'); var div = document.getelementbyid('div'); // 获取当前系统时间 var time = new date(); var h = time.gethours(); if(h < 12){ img.src = 'images/s.gif'; div.innerhtml = "亲,上午好,快去写代码"; }else if(h < 18){ img.src = 'images/x.gif'; div.innerhtml = "亲,下午好,快去写代码"; }else{ img.src = 'images/w.gif'; div.innerhtml = "亲,晚上好,快去写代码"; } </script> </body> </html>
1.5、表单的属性操作
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> </head> <body> <button>按钮</button> <input type="text" value="输入内容"/> <script> // 1、获取元素 var btn = document.queryselector('button'); var input = document.queryselector('input'); // 2、注册事件 处理程序 btn.onclick = function(){ // input.innerhtml = '点击了';这个是 普通合资 比如div 标签里面的内容 // 表单里面的值 文字内容是通过 value 来修改的 input.value = '被点击了'; // 如果想要某个表单被禁用 不能再点击disabled 我们想要这个按钮 button禁用 // btn.disabled = true; this.disabled = true; // this 指向的是事件函数的调用者 } </script> </body> </html>
1.6、仿京东隐藏显示密码操作
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> <style> .box { position: relative; width: 400px; border-bottom: 1px solid #ccc; margin: 100px auto; } .box input { width: 370px; height: 30px; border: 0; outline: none; } .box img { position: absolute; top: 5px; right: 7px; width: 24px; } </style> </head> <body> <div class="box"> <label for=""> <img src="images/close.png" id="eye"> </label> <input type="password" name="" id="pwd"></input> </div> <script> // 1、获取元素 var eye= document.getelementbyid('eye'); var pwd = document.getelementbyid('pwd'); // 2、注册事件 处理程序 var flag = 0; eye.onclick = function(){ // 点击一次后 flag一定要操作 if(flag == 0){ pwd.type = 'text'; eye.src="images/open.png"; flag = 1; //赋值操作 }else{ pwd.type='password'; eye.src="images/close.png"; flag = 0; } } </script> </body> </html>
1.7、样式属性操作
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> <style> div { width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <div></div> <script> // 1、获取元素 var div = document.queryselector('div'); // 2、注册事件 处理程序 div.onclick = function() { this.style.backgroundcolor = 'purple'; this.style.width = '250px'; } </script> </body> </html>
1.8、显示隐藏二维码
重点:修改display:none
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> </head> <body> <div class = "close-btn" style="display: block;"> <img src = "images/ewm.png" id="img"> </div> <script> // 1、获取元素 var btn = document.queryselector('.close-btn'); var img = document.queryselector('img'); // 2、注册事件 程序处理 btn.onclick = function(){ btn.style.display = 'none'; } </script> </body> </html>
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注的更多内容!