js操作元素相关案例
2024-05-08 23:50:52
案例：
循环精灵图背景
- 可以利用for循环设置一组元素的精灵图
案例分析：
<script>//1.获取元素 所有的小livar lis = document.querySelectorAll('li');for(var i=0;i<lis.length;i++){//让索引号 乘以44就是每个li 的背景y 坐标 index就是我们的y坐标var index = i * 44;lis[i].style.backgroundPosition = '0 -' + index + 'px';}</script>
案例：显示隐藏文本框内容
- 当鼠标点击文本框时，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示。
案例分析
<body><input type="text" value="手机"><script>//1.获取元素var text = document.querySelector('input');//2.注册事件 获得焦点事件 onfocustext.onfocus = function(){// console.log('得到了焦点');if(this.value === '手机'){this.value = '';}//获得焦点需要把文本框里面的蚊文字颜色变黑this.style.color = '#333';}//3.注册事件 失去焦点事件 onblurtext.onblur = function(){// console.log('失去了焦点');if(this.value === ''){this.value = '手机';}//失去焦点需要把文本框里面的蚊文字颜色变黑this.style.color = '#999';}</script>
</body>
样式属性操作
案例：密码框格式提示错误信息
- 用户如果离开密码框，里面输入个数不是6-16，则提示错误信息，否则提示输入正确信息
案例分析：
操作元素总结
- 操作元素是DOM核心内容
js操作元素相关案例相关推荐
- js操作元素节点对象value
js操作元素节点对象value
- js操作元素节点对象innerHTML
js操作元素节点对象innerHTML
- js 操作元素属性、操作元素样式、display(none、block)
js操作元素属性 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
- 原生js操作元素类名—classList.add()、classList.remove()、classList.contains()、classList.toggle()
原生js操作元素类名 classList.add( newClassName ): classList.toggle( className ): classList.remove( oldClassN ...
- python 全栈开发，Day54(关于DOM操作的相关案例，JS中的面向对象，定时器，BOM，client、offset、scroll系列)...
04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...
- js操作元素：改变元素内容有两种方式： interText 和 innerHTML的区别， 常用的元素的属性操作， 仿电脑系统时间问好 ，表单元素的属性操作 ，案例：仿京东显示隐藏密码 ，样式属性操作
文章目录 操作元素 改变元素内容有两种方式: interText 和 innerHTML的区别 常用的元素的属性操作 案例:仿电脑系统时间问好 表单元素的属性操作 案例:仿京东显示隐藏密码 样式属性操 ...
- 12 DOM操作的相关案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- 12-关于DOM操作的相关案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- 获取元素到页面顶部的距离_jQuery 操作元素综合案例
好好学习,天天向上 本章主要内容是:固定导航返回顶部.楼梯效果 1.固定导航返回顶部 效果图: 示例代码: <!DOCTYPE html> <html> <head la ...
最新文章
- GIT - 拉取其他仓库的某个分支的代码
- android442电视怎么投屏,哔哩哔哩怎么投屏电视? b站投屏的方法
- Nginx 中 fastcgi_pass 监听端口 unix socket和tcp socket差别
- 正反案例介绍SOLID原则
- linux取设备分辨率,linux 获取系统屏幕分辨率
- firefox使用掘金插件_Mozilla发布新的附加组件来修复旧版Firefox中的扩展禁用问题...
- Android 2.3 r1 中文 API （57） —— ScaleGestureDetector
- Python_装饰器Decorator
- USACO section1.3 Barn Repair 修理牛棚（贪心）
- Angular Material 教程之布局篇 (五) : 布局参数
- IIS+PHP环境下出现HTTP 500服务器内部错误——请检查权限设置
- Spring+webservice(cxf框架)
- 作为项目经理如何做好项目进度管理
- HTML网页设计制作——响应式网页影视动漫资讯bootstrap网页(9页)
- Flink Table和SQL中Table和DataStream的相互转换(fromDataStream、toChangelogStream、attachAsDataStream)
- 德州农业机械大学计算机科学,2020年德州农业机械大学申请条件
- 论文阅读：LinkNet: Exploiting Encoder Representations forEfficient Semantic Segmentation
- python指纹识别_python之图片指纹（唯一性的）
- Glyphs 3 for Mac字体设计编辑工具
- java minma_Java Core.minMaxLoc方法代码示例