js操作页面三步骤
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>操作页面的三步骤</title></head><body> <h1>操作页面的三步骤</h1> <div class="box"> <h1>box h1</h1> </div></body><script> // 1、获取页面标签 // 2、设置操作的激活条件 - 事件 // 3、具体的操作方式 - 内容 | 样式 | 事件 | 文档结构 // 1 let body = document.querySelector('body'); let box = document.querySelector('.box'); // 父级调用选择器方法，只完成自己内部的检索 let body_h1 = body.querySelector('h1'); console.log(body_h1); let box_h1 = box.querySelector('h1'); console.log(box_h1); // 2 body_h1.onclick = function () { // console.log('你丫点我了') // 3 if (box_h1.style.color != 'red') { box_h1.style.color = 'red'; box_h1.style.backgroundColor = 'orange'; } else { box_h1.style.color = 'black'; box_h1.style.backgroundColor = 'white'; } }</script></html>
js事件
鼠标事件
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停升级最新的教程和学习技巧（从零基础开始到前台项目实战教程，学习工具，全栈开发学习路线以及规划）<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>鼠标事件</title> <style> .box { width: 200px; height: 200px; background-color: pink; margin: 0 auto; } </style></head><body> <div class="box"></div></body><script> let box = document.querySelector('.box'); // 单击 box.onclick = function () { console.log('单击了', this) }; // 双击 box.ondblclick = function () { console.log('双击了') }; // 右键 box.oncontextmenu = function () { console.log('右键了'); // 有些事件有系统默认动作，取消默认动作可以返回 false return false; }; // 悬浮 box.onmouseover = function () { console.log('悬浮了'); }; // 移开 box.onmouseout = function () { console.log('移开了'); }; // 移动 box.onmousemove = function () { console.log('移动了'); }; // 按下 box.onmousedown = function () { console.log('按下了'); }; // 抬起 box.onmouseup = function () { console.log('抬起了'); };</script></html>
文档事件
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>文档事件</title> <style> body { height: 3000px; } </style> <script> // 页面加载成功 window.onload = function () { console.log(h1) } </script></head><body> <h1 id="h1">hhhhh</h1></body><script> let body = document.querySelector('body'); // 页面滚动事件 document.onscroll = function (ev) { console.log('滚动了'); // console.log(ev); // console.log(window.scrollY); if (window.scrollY >= 500) { body.style.backgroundColor = 'red'; } else { body.style.backgroundColor = 'white'; } }</script></html>
键盘事件
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>键盘事件</title></head><body> <h1>键盘事件</h1> <input type="text"></body><script> let inp = document.querySelector('input'); inp.onkeydown = function () { console.log('按下') }; inp.onkeyup = function () { console.log('抬起') }</script></html>
表单事件
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>表单事件</title> <style> /*表单的内外边框*/ input { border: 2px solid pink; } input:focus { outline: 2px solid yellow; } </style></head><body><form action=""> <input type="text" name="username"> <input type="password" name="password"> <input type="submit" value="登录"></form></body><script> let form = document.querySelector('form'); let submit = document.querySelector('[type="submit"]'); let usr = document.querySelector('[type="text"]'); // 表单提交事件：表单默认也有提交数据的动作，也可以取消 form.onsubmit = function () { console.log('提交了'); return false; }; // 获取焦点 usr.onfocus = function () { console.log('获取焦点') }; // 失去焦点 usr.onblur = function () { console.log('失去焦点') };</script></html>
事件对象
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>事件对象</title></head><body><input type="text" class="inp"></body><script> inp = document.querySelector('.inp'); inp.onkeydown= function (ev) { console.log(ev); // console.log(ev.keyCode); if (ev.keyCode === 13) { console.log('回车了') } if (ev.ctrlKey && ev.keyCode === 13) { console.log('消息发送了') } }; document.onclick = function (ev) { console.log(ev); // 鼠标点击点 console.log(ev.clientX, ev.clientY); }</script></html>
js操作内容
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停升级最新的教程和学习技巧（从零基础开始到前台项目实战教程，学习工具，全栈开发学习路线以及规划）<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>内容操作</title></head><body> <h1 class="title">标题</h1> <input type="text" class="title"> <button class="btn">改标题</button></body><script> let h1 = document.querySelector('h1.title'); let inp = document.querySelector('input.title'); let btn = document.querySelector('.btn'); // 内容操作：value | innerText | innerHTML btn.onclick = function () { // 拿到输入框的内容 inp_value = inp.value; if (inp_value) { // inp_value = ''; // 改的只是一个内存变量 inp.value = ''; // 清空输入框 // 将内容赋值给h1 innerText | innerHTML // console.log(h1.innerText); // console.log(h1.innerHTML); // 纯文本 // h1.innerText = inp_value; // 文本中的标签会被解析 h1.innerHTML = inp_value; } }</script></html>
js操作样式
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>样式操作</title> <style> .box { width: 200px; height: 200px; background-color: pink; } .sup-box { /*width: 400px;*/ height: 100px; background-color: orange; border-radius: 50%; line-height: 100px; text-align: center; color: red; } </style></head><body> <!--<div class="box" style="background-color: deeppink;"></div>--> <div class="box">文本</div></body><script> let box = document.querySelector('.box'); // 需求1：单击获取标签的之前背景颜色 /* box.onclick = function () { // 注：this.style 本质操作的是行间式（只能获取和设置行间式） // bgColor = this.style.backgroundColor; // console.log(bgColor); // 注：在内联和外联中书写的样式称之为 计算后样式 // 注：getComputedStyle 能获取计算后样式，也能获取行间式，但是只读 // getComputedStyle(标签, 伪类).样式; bgColor = getComputedStyle(this, null).backgroundColor; console.log(bgColor); width = getComputedStyle(this, null).width; console.log(width, parseInt(width)); // 只读，会报错 // getComputedStyle(this, null).backgroundColor = 'rgb(255, 20, 147)'; } */ // 需求2：点击修改标签的宽高背景颜色 /* box.onclick = function () { this.style.backgroundColor = 'orange'; this_style = getComputedStyle(this, null); // console.log(parseInt(this_style.width) * 2); // 宽放大两倍，高缩小两倍 this.style.width = parseInt(this_style.width) * 2 + 'px'; this.style.height = parseInt(this_style.height) / 2 + 'px'; } */ // 需求：操作计算后样 - 提取写好计算后样式，通过类名将 js 与 css 建立关联 box.onclick = function () { console.log(this.className); // this.className = 'sup-box'; /* if (this.className === 'box') { this.className = 'sup-box'; } else { this.className = 'box'; } */ // 注：有个空格：空格sup-box // this.className += ' sup-box'; if (this.className === 'box') { this.className += ' sup-box'; } else { this.className = 'box'; } };</script></html>
页面转跳
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>页面转跳</title></head><body> <button class="b1">自我刷新</button> <button class="b2">转跳到9</button> <button class="b3">ctrl新开转跳到9</button></body><script> window.owen = 'Owen'; let b1 = window.document.querySelector('.b1'); // 自我刷新 b1.onclick = function () { // console.log(owen); // '' 代表当前页面链接 // window.location.href = ''; location.reload(); }; let b2 = window.document.querySelector('.b2'); // 转跳到9*.html b2.onclick = function () { // 在自身所在标签替换 window.location.href = '9、样式操作.html'; }; // ctrl新开转跳到9 let b3 = window.document.querySelector('.b3'); b3.onclick = function (ev) { // open('转跳路径', '默认就是_blank') if (ev.ctrlKey) { window.open('9、样式操作.html'); } else { window.open('9、样式操作.html', '_self'); } }</script></html>
屏幕有滚动条下的两种宽度
去除滚动条剩余的一律宽度
let html = document.querySelector('html');console.log(html.clientWidth);
不去除滚动条剩余的一律宽度
function getHtmlWidth() { let hidden = document.createElement('div'); hidden.style.width = '100vw'; html.appendChild(hidden); width = parseInt(getComputedStyle(hidden, null).width); html.removeChild(hidden); return width}width = getHtmlWidth();console.log(width);
案例：动态尺寸
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停升级最新的教程和学习技巧（从零基础开始到前台项目实战教程，学习工具，全栈开发学习路线以及规划）<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>动态尺寸</title> <style> body { margin: 0; height: 3000px; } .box { /*width: 200px;*/ /*height: 200px;*/ /*width: 100%;*/ background-color: orange; position: fixed; top: 0; left: 0; min-width: 900px; max-width: 1100px; width: 90%; margin-left: 5%; /*vw viewwidth vh viewheight*/ /*width: 90vw;*/ /*margin-left: 5vw;*/ } </style></head><body> <div class="hidden" style="width: 100vw"></div> <div class="box"></div></body><script> let html = document.querySelector('html'); // 去除滚动条的宽度 console.log(html.clientWidth); // 包含滚动条的宽度 // let hidden = document.querySelector('.hidden'); // width = parseInt(getComputedStyle(hidden, null).width); // console.log(width); function getHtmlWidth() { let hidden = document.createElement('div'); hidden.style.width = '100vw'; html.appendChild(hidden); width = parseInt(getComputedStyle(hidden, null).width); html.removeChild(hidden); return width } width = getHtmlWidth(); console.log(width); function resizeBox() { box_width = parseInt(getComputedStyle(box, null).width); box.style.height = box_width / 6 + 'px'; if (box_width >= 1100) { box.style.marginLeft = (html.clientWidth - 1100) / 2 + 'px' } } let box = document.querySelector('.box'); resizeBox(); window.onresize = function () { resizeBox(); };</script></html>
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 »
js操作页面三步骤
