【Web APIs】JavaScript 操作元素 ⑧ ( DOM 操作元素 案例 | 获取焦点 onfocus 事件 | 失去焦点 onblur 事件 | 获取/设置 HTML 页面背景颜色 )
CSDN 2024-08-11 13:33:01 阅读 99
文章目录
一、案例需求二、案例核心要点1、获取焦点事件 - onfocus 事件2、失去焦点事件 - onblur 事件
三、完整代码示例1、代码示例2、执行效果
四、开关灯案例1、案例需求2、核心要点 - 获取 / 设置 HTML 页面背景颜色3、代码示例
一、案例需求
实现如下效果 , 默认状态下 , 表单显示灰色提示字体 , 点击表单输入内容是黑色字体的 ;
二、案例核心要点
1、获取焦点事件 - onfocus 事件
在 JavaScript 中 , 当 DOM 元素 获得焦点时 , 该 DOM 元素上绑定的 onfocus 事件被触发 ;
绑定该 onfocus 事件的元素 一般都是 input 表单元素 ;如 : 当 用户 点击输入框 或 通过键盘切换到输入框时 , 该事件会被触发 ;
绑定 onfocus 事件的方法 :
设置 onfocus 属性 : 可以 通过 DOM 操作 , 给元素添加 onfocus 属性 , 来指定当焦点集中在元素上时要执行的JavaScript代码 ;
<code>// 行内设置 : 使用 onfocus 属性
<input type="text" onfocus="myFunction()">code>
// JavaScript 脚本中设置
var text = document.querySelector('input');
text.onfocus = function() { -- -->}
addEventListener 动态设置 : 使用 addEventListener 方法来 动态地 为元素添加 focus 事件的处理函数 ;
// 使用 addEventListener
document.getElementById("myInput").addEventListener("focus", function() {
// 执行相关操作
});
2、失去焦点事件 - onblur 事件
在 JavaScript 中 , 当 DOM 元素 失去焦点时 , 该 DOM 元素上绑定的 onblur 事件被触发 ;
如 : 用户从 输入框 移动到 页面的其他部分 或 按下 Tab 键 移动 焦点时 , 该事件会被触发 ;
绑定 onblur 事件的方法 :
设置 onblur 属性 : 可以通过 DOM 操作 , 给元素添加 onblur 属性 , 来指定当焦点集中在元素上时要执行的JavaScript代码 ;
// 行内设置 : 使用 onblur 属性
<input type="text" onblur ="myFunction()">code>
// JavaScript 脚本中设置
var text = document.querySelector('input');
text.onblur = function() { -- -->}
addEventListener 动态设置 : 使用 addEventListener 方法来 动态地 为元素添加 onblur 事件的处理函数 ;
// 使用 addEventListener
document.getElementById("myInput").addEventListener("onblur", function() {
// 执行相关操作
});
三、完整代码示例
1、代码示例
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Inline Style Operation Example</title>
<style>
input { -- -->
color: gray;
}
</style>
</head>
<body>
<input type="text" value="请输入搜索内容">code>
<script>
// 1. 使用 标签选择器 获取元素
var text = document.querySelector('input');
// 2. 注册 获得焦点 事件 onfocus
text.onfocus = function() { -- -->
// 如果 input 表单获取焦点 , 则显示 " 请输入搜索内容 " 内容
if (this.value === '请输入搜索内容') {
this.value = '';
}
// 获取焦点后 , 颜色变为黑色
this.style.color = 'black';
}
// 3. 注册 失去焦点事件 onblur
text.onblur = function() {
if (this.value === '') {
this.value = '请输入搜索内容';
}
// 失去焦点后 , 颜色变为灰色
this.style.color = 'gray';
}
</script>
</body>
</html>
2、执行效果
默认状态时 , 显示如下样式 , input 表单中 显示 " 请输入搜索内容 " 字体是黑色的 ;
鼠标点击 表单 , 此时 灰色的字体 消失 , 表单中显示光标 ;
此时输入内容显示的是黑色字体 ;
完整的执行效果如下 :
四、开关灯案例
1、案例需求
实现如下开关灯效果 :
2、核心要点 - 获取 / 设置 HTML 页面背景颜色
<code>document.body.style.backgroundColor 属性 可 用于 设置 或 获取 HTML 页面 的背景颜色 ;
设置背景颜色示例 :
document.body.style.backgroundColor = "yellow";
获取背景颜色示例 :
var currentColor = document.body.style.backgroundColor;
console.log(currentColor); // 输出当前页面背景颜色
如果没有为 document.body.style.backgroundColor 显式设置值 , 则它将 返回空字符串或浏览器默认的背景颜色 ;通过直接设置 style.backgroundColor , 可以 实时更改页面的背景颜色 , 这种方式 比修改 CSS 文件更为便捷 , 尤其适用于动态交互或响应用户事件的情况 ;
3、代码示例
代码示例 :
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Inline Style Operation Example</title>
<style>
</style>
</head>
<body>
<button id="button">关灯</button>code>
<script>
var button = document.getElementById('button');
// 当前开灯状态 设置 1 , 背景白色 , 按钮显示 " 关灯 " , 点击按钮 切换到 关灯状态
// 当前关灯状态 设置 0 , 背景黑色 , 按钮显示 " 开灯 " , 点击按钮 切换到 开灯状态
var flag = 0;
button.onclick = function() { -- -->
if (flag == 0) {
document.body.style.backgroundColor = 'black';
button.innerText = '开灯';
flag = 1;
} else {
document.body.style.backgroundColor = 'white';
button.innerText = '关灯';
flag = 0;
}
}
</script>
</body>
</html>
执行效果 :
上一篇： 2024 抖音欢笑中国年(五)：Wasm、WebGL 在互动技术中的创新应用
下一篇： [前端] 如何使用Quasar创建应用
本文标签
【Web APIs】JavaScript 操作元素 ⑧ ( DOM 操作元素 案例 | 获取焦点 onfocus 事件 | 失去焦点 onblur 事件 | 获取/设置 HTML 页面背景颜色 )
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。