0201 设置/修改元素内容和属性
document.write()方法
文本内容追加到</body>前面的位置
文本中标签会被解析
<script>document.write('hello world')document.write('<h3>你好世界</h3>')</script>
innerText属性
将文本内容添加更新到任意标签位置
文本包含的标签不会被解析
<style>div {width: 200px;height: 200px;background-color: pink;}</style></head><body><div>时间打开VNK的SV你倒是</div><script>//获取标签let div = document.querySelector("div")//修改标签， 对象.属性=值 div是对象，innnerText是属性div.innerText = "有点意思"</script></body>innerHTML属性
将文本内容添加更新到任意标签位置
文本包含的标签会被解析
<style>div {width: 200px;height: 200px;background-color: pink;}</style></head><body><div>时间打开VNK的SV你倒是</div><script>//获取标签let div = document.querySelector("div")//修改标签， 对象.属性=值 div是对象，innnerText是属性div.innerHTML = "<strong>有点意思</strong>"</script></body>随机点名案例
<style>div {display: inline-block;width: 50px;height: 30px;vertical-align: middle;text-align: center;border: 1px solid pink;line-height: 30px;}</style></head><body>抽中的选手是：<div></div><script>//1获取标签let div = document.querySelector("div")//2得到随机名字function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min}let arr = ["张三", "李四", "王五", "王朝", "马汉"]let random = getRandom(0, arr.length - 1)//3写入标签内部div.innerHTML = arr[random]arr.splice(random, 1)console.log(arr)</script></body>设置/修改元素属性
常见属性：href:链接 title:标题 src:图片
语法：对象.属性=值
<img src="/1.jpg" alt=""><script>//1获取元素let pic = document.querySelector('img')//2修改元素pic.src = '/3.webp'pic.title = "我是刘海生"</script>设置/修改元素样式属性
轮番图/滚动图片更换图片属性
通过style属性操作CSS
操作类名（className）操作CSS
通过classList操作类控制CSS
语法
对象.style.样式属性=值
注意
css有连接符的需要用小驼峰法
<style>div {width: 300px;height: 300px;background-color: gray;}</style><body><div></div><script>//1获取标签let box = document.querySelector("div")//2修改背景颜色box.style.background = "blue"</script></body操作类名（className）操作CSS
<style>div {width: 300px;height: 300px;background-color: gray;}.active {width: 400px;height: 500px;background-color: yellow;}</style><body><div></div><script>//1获取标签let box = document.querySelector("div")//2box.className = "active"</script></body>使用classList修改元素样式
//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类，原来有就换，原来没有就加
元素.classList.toggle('类名')
<style>div {width: 300px;height: 300px;background-color: gray;}.active {width: 400px;height: 500px;background-color: skyblue;}</style><body><div></div><script>//1获取标签let box = document.querySelector("div")//2box.classList.add("active")</script></body>设置/修改表单元素属性
语法：
表单.value='修改内容'
表单.type='修改内容'
0201 设置/修改元素内容和属性相关推荐
- JS中修改元素内容，属性，样式的方法【详解】
改变元素内容的方法: .innerHTML=内容(可识别标签) .innerText=内容(只识别文本) 如果把属性作为集合,那么样式就是这个集合 ...
- 设置/修改DOM元素内容和属性
设置/修改DOM元素内容 document.write()方法 只能追加到body中 元素innerText属性 将文本内容添加/更新到任意标签位置 文本中包含的标签不会被解析 元素innerHTML ...
- html+设置img+src属性值,javascript获取、设置修改img的src属性（get/setAttribute）
在开发网站过程中,事先就设置好了图片img的src性,一般来说很少修改这个属性,网站加载时直接显示事先设置好的图片.但如果网页要求实现滚屏加载图片(动态加载图片),也就是一次不显示网页内的所有图片,当 ...
- APIS——获取dom对象、操作元素内容和属性、间歇函数
APIS 变量声明 Web API基本认知 作用和分类 DOM DOM树 DOM对象 获取DOM对象 根据CSS选择器来获取DOM元素(重点) 其它获取DOM元素方法(了解) 操作元素内容 操作元素属 ...
- jQuery - 设置div的内容和属性
jsp中设置div的值: 三种方法: ①html ②text ③val (如果是input标签,只能使用val设置值!) <!DOCTYPE html> <html> < ...
- 获取设置HTML元素的zIndex属性(元素的堆叠顺序)
数值越大表示离用户越近,也就是层叠顺序越靠上,优先显示.zIndex大的元素会浮于zIndex小的元素之上. <script>//获取$("document").rea ...
- html 更改元素坐标,利用JS修改元素的位置属性，为什么style.left可行而style.top失效？...
Q.想利用JS中的move函数实现小图的斜线下移,但是明明代码几乎一样,left的移动可以实现,top却怎么也动不了 台球桌 *{ padding:0; margin:0; } div{ backgr ...
- DOM（二）——修改内容、属性、样式
文章目录 一.修改内容 `元素对象.innerHTML` `元素对象.textContent` `表单元素.value` 二.属性 1.字符串类型的HTML标准属性 新DOM方法 特例: class属 ...
- js操作元素：改变元素内容有两种方式： interText 和 innerHTML的区别， 常用的元素的属性操作， 仿电脑系统时间问好 ，表单元素的属性操作 ，案例：仿京东显示隐藏密码 ，样式属性操作
文章目录 操作元素 改变元素内容有两种方式: interText 和 innerHTML的区别 常用的元素的属性操作 案例:仿电脑系统时间问好 表单元素的属性操作 案例:仿京东显示隐藏密码 样式属性操 ...
最新文章
- 【2-SAT问题】解题报告：POJ 3678 Katu Puzzle（2-SAT问题的判定）
- hdu4920 矩阵乘法%3
- 编写一个watchdog.sh脚本_五大原因！为何要将Jupyter Notebook转换为python脚本？
- python sanic_如何使用Python和Sanic使代码快速异步
- c语言程序设计 高等教育,[高等教育]c语言程序设计.doc
- SpringMVC 过滤非法字符
- 9.卷2(进程间通信)---记录上锁
- git学习笔记-（8-高层命令（2））
- Redis中文学习文档redis.cn
- linux目录更改权限不够,Linux中文件夹访问权限不足
- 如何使用SHC加密Shell脚本
- html检测正则表达式,正则表达式在线测试工具
- 嵌入式系统开发笔记0_0：目录
- 路由器和三层交换机的基本实验操作
- 如何给Mac OS 更新到指定版本系统
- cad中填充的剖面线不能被修剪_为什么CAD中填充无法修剪？
- Word内嵌程序打开报错“Office已阻止访问以下嵌入对象，以便保护你的安全”
- pe系统如何读取手机_什么是otg(pe系统如何读取手机)
- MATLAB矩阵分块拼装 .
- 个人博客系统(Vue实现）的主页布局设计