js操作元素：改变元素内容有两种方式： interText 和 innerHTML的区别， 常用的元素的属性操作， 仿电脑系统时间问好 ，表单元素的属性操作 ，案例：仿京东显示隐藏密码 ，样式属性操作
2024-05-04 00:08:38
文章目录
- 操作元素
- 改变元素内容有两种方式：
- interText 和 innerHTML的区别
- 常用的元素的属性操作
- 案例：仿电脑系统时间问好
- 表单元素的属性操作
- 案例：仿京东显示隐藏密码
- 样式属性操作
操作元素
JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。
改变元素内容有两种方式：
语法1：
element.innerText
语法2：
element.innerHTML
例子：
<body><button>显示当前系统时间</button><div>某个时间</div><p>123</p><script>//当我们点击了按钮，div里面的文字会发生变化//1.获取元素var btn = document.querySelector('button');var div = document.querySelector('div');//2.注册事件btn.onclick = function () {// div.innerText = '2020-10-8';div.innerText = getDate();}function getDate() {var date = new Date();// console.log(date.getFullYear()); //返回当前日期的年 20// console.log(date.getMonth() + 1); //月份 返回的月份小1个月 记得月份+1 // console.log(date.getDate()); //返回的是几号// console.log(date.getDay()); //3 周一返回的是1 周六返回的是 6 但是周日返回的是0//我们写一个2020年10月8日 星期四var year = date.getFullYear();var month = date.getMonth() + 1;var dates = date.getDate();var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];var day = date.getDay();var day = date.getDay();// console.log('今天是：' + year +'年' +month + '月' +dates +'日'+arr[day]);return '今天是：' + year + '年' + month + '月' + dates + '日' + arr[day];}//我们元素可以不用添加事件var p = document.querySelector('p');p.innerText = getDate();</script>interText 和 innerHTML的区别
这两个属性是可读写的 ，可以获取元素里面的内容
innerText 从起始位置到终止位置的内容，但它去除 html 标签，同时空格和换行也会去掉。
innerHTML 起始位置到终止位置的全部内容，它识别 html 标签，同时保留空格和换行。
<body><div></div><p>温润如玉贺知书<span>艾子瑜</span></p><script>//innerText 和 innerHTML 的区别//1.innerText 不识别html标签 非标准 去除空格和换行var div = document.querySelector('div');// div.innerText = '<strong>今天是 ：2020-10-8 <srtong>';//2.innerHTML 识别 html 标签 W3C标准 保留空格和换行的div.innerHTML = '<strong>今天是 ：2020-10-8 <srtong>';//这两个属性是可读写的 可以获取元素里面的内容var p = document.querySelector('p');console.log(p.innerText);console.log(p.innerHTML);</script>
</body>常用的元素的属性操作
- innerText、innerHTML 改变元素内容
- src、href
- id、alt、title
例子：
<head><style>img {width: 300px;height: 260px;}</style>
</head><body><button id="ng">奶盖</button><button id="xg">西瓜</button></br><img src="data:images/naigai.jpg" alt="" title="奶盖"><script>//修改元素属性 src//1.获取元素var ng = document.getElementById('ng');var xg = document.getElementById('xg');var img = document.querySelector('img');//2.注册事件 处理程序xg.onclick = function () {img.src = 'images/xigua.jpg';img.title = '西瓜不加冰';}ng.onclick = function () {img.src = 'images/naigai.jpg';img.title = '奶盖不加糖';}</script></body>
视图：
案例：仿电脑系统时间问好
- 分时显示不同图片，显示不同的问候。
- 根据事不同的时间，页面显示不同图片，同时显示不同的问候语。
- 如果上午时间打开页面，显示上午好，显示上午的图片。
- 如果下午的时间打开页面显示下午好，显示下午的图片。
- 如果晚上时间打开页面，显示晚上好，显示晚上的图片。
案例分析：
- 根据系统不同时间来判断，所以需要用到日期内置对象。
- 利用多分支语句来设置不同的图片。
- 需要一个图片，并且根据时间来修改图片，就需要用到操作元素 src 属性
- 需要一个 div 元素，显示不同问候语，修改元素内容即可。
例子：
<body><img src="data:images/zao.gif" alt=""><div>上午好</div><script>/* 案例分析：根据系统不同时间来判断，所以需要用到日期内置对象。利用多分支语句来设置不同的图片。需要一个图片，并且根据时间来修改图片，就需要用到操作元素 src 属性需要一个 div 元素，显示不同问候语，修改元素内容即可。 *///1.获取元素var img = document.querySelector('img');var div = document.querySelector('div');//2.得到当前的小时数var date = new Date();var h = date.getHours();//3.判断小时改变图片和文字信息if (h < 12) {img.src = 'images/zao.gif';div.innerHTML = '亲，上午好，好好写代码';} else if (h < 18) {img.src = 'images/wu.gif';div.innerHTML = '亲，下午好，好好写代码';} else {img.src = 'images/wan.gif';div.innerHTML = '亲，晚上好，好好写代码';}</script>
</body>
视图：
表单元素的属性操作
利用DOM可以操作如下表单的属性：
tple、value、 checked 、selected、 disabled
例子：
<body><button>按钮</button><input type="text" value="输入内容"><script>/*表单与元素的属性操作利用DOM可以操作如下表单元素的属性：type,value,checked,selected,disable*///1.获取元素var btn = document.querySelector('button');var input = document.querySelector('input');//2.注册事件 处理程序btn.onclick = function() {//input.innerHTML = '点击了';这个是普通盒子，比如div标签里面的内容//表单 里面的值，文字内容是通过value来修改的input.value = '被点击了';//如果想要某个表单被禁用，不能再点击disbled 我们想要这个按钮button禁用// btn.disabled = true;this.disabled = true;//this 指向的是事件函数的调用者 btn}</script>
</body>
案例：仿京东显示隐藏密码
- 点击按钮将密码框切换为文本框，并可以查看密码明文。
- 核心思路：
- 点击眼睛按钮，把密码框类型改为文本框就可以看到里面的密码。
- 一个按钮两个状态，点击一次，切换为文本，继续点击一次切换为密码框。
- 算法：利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框，flag设置为1。
例子：
<head><style>.box {position: relative;width: 400px;border-bottom: 1px solid #cccccc;margin: 100px auto;}.box input {width: 370px;height: 30px;border: 0;outline: none;}.box img {position: absolute;top: 10px;right: 2px;width: 24px;}</style>
</head>
<body><div class="box"><label for=""><img src="data:images/close.png" alt="" id="eye"></label><input type="password" name="" id="pwd"></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>视图：
样式属性操作
- 我们可以通过JS修改元素大小、颜色、位置等样式。
1. element.style 行内样式操作
2. element.className 类名样式操作
注意：
- JS里面的样式采取 驼峰命名法，比如fontSize、bacgroundColor
- JS修改style样式操作，产生的是行内样式，css权重比较高
例子：
<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>/*样式属性操作我们可以通过JS修改元素大小、颜色、位置等样式。1.element.style 行内样式操作2.element.className 类名样式操作注意：1.JS里面的样式采取驼峰命名法，比如fontSize、bacgroundColor2.JS修改style样式操作，产生的是行内样式，css权重比较高*///1.获取元素var div = document.querySelector('div');//2.注册事件 处理程序div.onclick = function() {//div.style里面的属性 采取驼峰命名法this.style.backgroundColor = 'purple';this.style.width = '250px';}</script>
</body>
视图：
js操作元素：改变元素内容有两种方式： interText 和 innerHTML的区别， 常用的元素的属性操作， 仿电脑系统时间问好 ，表单元素的属性操作 ，案例：仿京东显示隐藏密码 ，样式属性操作相关推荐
- QTextEdit详解(设置显示内容的两种方式（setPlainText/insertPlainText、滚动条自动(往下、往上)滚动……)
目录 一.设置显示内容的两种方式(setPlainText/insertPlainText) 二.滚动条自动(往下.往上)滚动 三.如何设置背景颜色/背景图片 一.设置显示内容的两种方式(setPla ...
- 前端案例——1.仿京东显示隐藏密码明文案例。
<!-- 仿京东显示隐藏密码明文案例 --> <!-- 核心思路:点击眼睛按钮,把密码框改为文本框就可以看见里面的密码. --> <!-- 一个按钮两个状态,点击一次,切 ...
- 仿京东显示隐藏密码明文案例（字体图标实现）
仿京东显示隐藏密码明文案例(字体图标实现) 眼睛使用的是 iconfont 阿里矢量图标库的内容 链接:https://www.iconfont.cn/search/index?代码案例展示: 字体图 ...
- [js] axios为什么可以使用对象和函数两种方式调用？是如何实现的？
[js] axios为什么可以使用对象和函数两种方式调用?是如何实现的? axios 源码 初始化 看源码第一步,先看package.json.一般都会申明 main 主入口文件. // packag ...
- 利用jquery的qrcode.js插件生成二维码的两种方式的使用
2019独角兽企业重金招聘Python工程师标准>>> 利用jquery的qrcode.js插件生成二维码的额两种方式,canvas(即画布)方式和table方式(原文地址http: ...
- 国产化之 .NET Core 操作达梦数据库DM8的两种方式
Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https ...
- java中实现同步的两种方式:syschronized和lock的区别和联系
转载自 http://www.cnblogs.com/xiohao/p/4151408.html Lock是java.util.concurrent.locks包下的接口,Lock 实现提供了比使用s ...
- f12获取网页文本_jmeter获取web页面文本内容的两种方式
介绍两种jmeter获取页面文本的方式,以我的博客主页为例,我想获取标题"风城烟雨"这几个字 方式一:使用正则表达式提取器 1.在博客主页空白处鼠标右键查看页面源代码,在源代码中找 ...
- node.js 获取异步方法里面的数据 =》 两种方式
第一种: 通过回调函数实现: var fs = require('fs); function getmime(callback){ fs.readFile('./t1.js', function(er ...
最新文章
- Android.mk和Application.mk文件语法规范说明及举例
- 后浪们 ： 难道要先结婚后恋爱？
- Exchange Server 2013之邮件存档配置
- FirefoxLinux下的网银离我们不远了
- linux下安装php的imagick扩展模块（附php升级脚本）
- python 链栈及基本操作
- windows服务编程 注册InstallUtil.exe
- Mac 使用常见问题汇集
- 如何查看 Windows10 版本号
- linux 安装Paramiko模块安装和使用
- eclipse搭建简单的web服务，使用tomcat服务
- 如何启用sqlplus的AutoTrace功能
- 定制WES7紧急修复U盘
- 广东再增一项重大跨海工程 黄茅海跨海通道将开建
- 免费开通量化软件恒生ptrade和讯投qmt
- java duration 设置值,Java中的Duration toHours()方法
- 主分区和逻辑分区的区别
- android 模糊线条,android 线条选择器
- 给定数字0-9各若干个。你可以以任意顺序排列这些数字，但必须全部使用。目标是使得最后得到的数尽可能小（注意0不能做首位）
- U3d 代码修改图片的尺寸