JS-元素的样式操作-文本内容-位置
2024-04-24 02:14:19
JS-元素的样式操作-文本内容-位置
1 回顾
1.1 从文档中获取元素
1. 通过 ID 名document.getElementById()2. 通过标签名document.getElementsByTagName()element.getElementsByTagName()3. 通过类名document.getElementsByClassName()element.getElementsByClassName()4. 通过 name 值document.getElementsByName();5. 使用选择器获取元素document.querySelector()element.querySelector()document.querySelectorAll()element.querySelectorAll()6. document.all 获取所有的元素
1.2 文档树
1. 节点树firstChildlastChildchildNodespreviousSiblingnextSiblingparentNode
2. 元素树firstElementChildlastElementChildchildrenpreviousElementSiblingnextElementSiblingparentElement
1.3 元素的属性操作
1. 元素.属性名只可以读写内置属性2. 元素.getAttribute() / 元素.setAttribute()读写写在html代码上的属性主要用于读写自定义属性3. 元素.dataset.属性名读写 data-* 形式的自定义属性2 元素的样式操作
2.1 读写行内样式
元素.style.属性名;
注意：
- 该方式只能读取设置在行内的样式，设置也是把样式设置到行内。
- 如果CSS属性名中有
-会自动映射为小驼峰的形式，如果backgorund-color映射为backgroundColor
// 修改box的背景颜色
box.style.background = '#f90';
// 设置box的边框颜色（除了用中括号还可以用小驼峰）
//box.style['border-color'] = 'green';
box.style.borderColor = 'green';// 获取读取样式的按钮(行内式可读取)
var btn2 = document.querySelector('#btn2');
// 点击按钮事件
btn2.onclick = function() {console.log(box.style.background); //rgb(255, 153, 0)console.log(box.style.width); //空
}
2.2 读取计算样式
getComputedStyle(元素).属性名;
/*** 封装读取计算样式的函数*/
function getStyle(ele, attr) {// 判断if (window.getComputedStyle) {// IE9 + 以及其他非 IEreturn getComputedStyle(ele)[attr];} else if (ele.currentStyle) {// IE8 以及以下return ele.currentStyle[attr];}
}
**注意：**该方式只能读取。
var styleObj = getComputedStyle(box);
console.log(styleObj.width); //400px
console.log(styleObj.backgroundColor); //rgb(255,255,0)
console.log(styleObj.margin); //0
案例：直接设置样式
(function() {// 获取所有的li元素var lis = document.querySelectorAll('.news .item')// 遍历lis，给其中的每个li监听click事件lis.forEach(function(liItem) {// 添加事件liItem.onclick = function() {// 判断目前所点击的li的边框是否是红色if (liItem.style.borderColor==='red') {// 去掉红色边框liItem.style.borderColor = '';} else {// 设置红色边框liItem.style.borderColor = 'red'}}})})()
2.3 通过设置元素的类名操作样式
① className
元素.className; // 可读可写注意： dom 对象中的 className 属性与 标签中的 class 属性对应。
(function() {// 获取所有的li元素var lis = document.querySelectorAll('.news .item')// 遍历lis，给其中的每个li监听click事件lis.forEach(function(liItem) {// 添加事件liItem.onclick = function () {// 判断 li 是否被选中if (liItem.className === 'item') {// 添加类名 activeliItem.className = 'item active';} else {// 去掉类名 activeliItem.className = 'item';}}}) })()
② classList
元素.classList; // 得到描述元素类名的对象，是所有类名组成的集合，是个伪数组// classList 对象具有以下三个方法：
元素.classList.add('类名'); // 给元素添加一个类名
元素.classList.remove('类名'); // 删除一个类名
元素.classList.toggle('类名'); // 类名切换（如果元素有该类名就删除，没有该类名就添加）
(function() {// 获取所有的li元素var lis = document.querySelectorAll('.news .item')// 遍历lis，给其中的每个li监听click事件lis.forEach(function(liItem) {// 是否存在类名 activeliItem.onclick = function() {// if (liItem.className.indexOf('active') === -1) {// // 添加 active 类名// liItem.classList.add('active');// } else {// // 删除 active 类名// liItem.classList.remove('active')// }liItem.classList.toggle('active');}})})()
3 读写元素的文本内容（可读可写）
innerHTML 读写元素中所有的内容（包括内部的html标签）
outerHTML 读写元素自己在内的所有代码内容（包括自己的标签代码）
innerText 读写元素内的文本内容（不包括html标签）（只保留换行）
textContent 读写元素内的文本内容（不包括html标签），保留原格式（缩进和换行）
4 读取元素的尺寸（只读）
offsetWidth 盒子的宽度（内容宽+左右内边距+左右边框宽）
offsetHeight 盒子的高度（内容高+上下内边距+上下边框宽）clientWidth 宽度（内容宽+左右内边距）
clientHeight 高度（内容高+上下内边距）
‘
scrollWidth 如果内容没有溢出与clientWidth一致，如果内容溢会加上溢出的内容的宽度
scrollHeight 如果内容没有溢出与clientHeight一致，如果内容溢会加上溢出的内容的高度getBoundingClientRect() 返回一个对象，对象中有 width 和 height 属性，获取盒子的尺寸，与 offsetWidth/offsetHeight 是一致的
如何获取视口的尺寸？
// 第一种方式 会包括滚动条本身的宽度
window.innerWidth;
window.innerHeight;// 第二种方式 不会包括滚动条本身的宽度，推荐
document.documentElement.clientWidth
document.documentElement.clientHeight
5 读取元素的位置 （只读）
offsetLeft 元素在第一个定位的祖先元素上的位置，没有定位的祖先元素，参照整个页面
offsetTop 元素在第一个定位的祖先元素上的位置，没有定位的祖先元素，参照整个页面clientLeft 元素左边框的宽度
clientTop 元素上边框的宽度getBoundingClientRect() 返回一个对象，对象中有如下属性读取元素的位置left 元素在视口上的位置，水平坐标top 元素在视口上的位置，垂直坐标x 同 lefty 同 topright 元素右下角的水平坐标bottom 元素右下角的垂直坐标
案例：图片延迟
(function(){// 获取所有的img元素var imgItems = document.querySelectorAll('.images img');// 调用函数，第一屏加载loadImage();// 监听滚动的滚动window.onscroll = loadImage;// 封装函数 实现加载图片// 图片在视口上的y坐标 < 视口高度function loadImage() {// 遍历图片imgItems.forEach(function(imgItem) {// 判断图片在视口上的y坐标是否小于视口高度，如果成立，加载图片if (imgItem.getBoundingClientRect().top < document.documentElement.clientHeight) {// 加载图片imgItem.src = imgItem.dataset.src; // 设置为不透明imgItem.style.opacity = '1';}})}
})()
6 读写元素中内容的位置（可读可写）
scrollLeft 值变大，内容向左滚动（滚动滑块向右）
scrollTop 值变大，内容向上滚动（滚动滑块向下）
// 点击内容向左滚动var btn1 = document.querySelector('#btn1')btn1.onclick = function() {box.scrollLeft += 10;
// 点击内容向右滚动var btn2 = document.querySelector('#btn2')btn2.onclick = function() {box.scrollLeft -= 10;
// 点击内容向上滚动var btn3 = document.querySelector('#btn3')btn3.onclick = function() {box.scrollTop += 10;
// 点击内容向下滚动var btn4 = document.querySelector('#btn4')btn4.onclick = function() {box.scrollTop -= 10;
总结
1. 元素的样式操作1.1 读写行内样式1.2 读取计算样式1.3 操作元素的类名设置样式 className classList2. 读写元素中的文本内容 (可读可写)innerHTMLouterHTMLinnerTexttextContent3. 读取元素的尺寸（只读）offsetWidth / offsetHeightclientWidth / clientHeightscrollWidth / scrollheightgetBoundingClientRect()4. 读取元素的位置（只读）offsetLeft / offsetTopclientLeft / clientTopgetBoundingClientRect()5. 读写元素中内容的位置（可读可写）scrollleft / scrollTopJS-元素的样式操作-文本内容-位置相关推荐
- js中显示一个指定html文档,JS实现选定指定HTML元素对象中指定文本内容功能示例...
本文实例讲述了JS实现选定指定HTML元素对象中指定文本内容功能.分享给大家供大家参考,具体如下: 该功能用处多多,可以灵活运用之!主要函数如下: //选中文本中指定部分 function selec ...
- vue选中点击的元素_vue中v-for循环选中点击的元素并对该元素添加样式操作
相信大家都会遇到这种情况:v-for循环时,我只需要点击到的元素做出相应反应,其他的元素不变:但是往往所有v-for循环出的元素都会变化.如下面的代码:我需要点击到的元素添加一个类样式,其他元素不变, ...
- xpath爬取airbnb民宿价格信息，为啥用属性定位不到元素，但是用文本内容模糊匹配却可以
超级小白,刚刚接触python.今天想要试着爬一下爱彼迎上的民宿信息,包括房屋情况.位置.价格三个信息: 我一开始的代码是这样的: 前两个信息都可以用find_elements_by_xpath很容易 ...
- Linux 操作文本内容命令
终端删除整行 Ctrl+u 删除命令行开始至光标处Ctrl+k 删除光标至命令行结尾Ctrl+a 光标移到最前Ctrl+e 光标移到最 vi删除整行 dd:删除光标所在一整行ndd:删除光标所在向下n ...
- js操作元素：改变元素内容有两种方式： interText 和 innerHTML的区别， 常用的元素的属性操作， 仿电脑系统时间问好 ，表单元素的属性操作 ，案例：仿京东显示隐藏密码 ，样式属性操作
文章目录 操作元素 改变元素内容有两种方式: interText 和 innerHTML的区别 常用的元素的属性操作 案例:仿电脑系统时间问好 表单元素的属性操作 案例:仿京东显示隐藏密码 样式属性操 ...
- WebAPI第一天学习总结—— DOM、获取元素、事件基础、操作元素、节点操作
Web API介绍 API的概念 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访 ...
- JavaScript中的元素获取与操作
js元素获取与操作 可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量,比如: <scrip ...
- 【JavaScript-事件②】表单元素的属性操作，密码显示隐藏的实现
目录 前言 1.据时间事件改变状态 2.表单元素的属性操作 3.实现密码显示隐藏 4.循环精灵图 前言 阅读使人充实,会谈使人敏捷,写作使人精确. ...
- jQuery（三）：样式操作
一.DOM操作分类 DOM Core:任何一种支持DOM的编程语言都可以使用它,例如:getElementById(). HTML-DOM:用于处理HTML文档,例如:document.forms. ...
最新文章
- 新手站长们如何利用10分钟的时间内多写高质量的原创量？
- 使用dotnet-dump 查找 .net core 3.0 占用CPU 100%的原因
- 关于低代码自定义表单的思路和想法
- ps aux grep java_linux命令ps-aux监控java进程
- 转发： Angular装饰器
- 算法整理(二)---高速排序的两种实现方式:双边扫描和单边扫描
- python发送邮件带附件_python 发送带附件邮件
- SCCM 2007 R7使用手记
- Centos 7镜像官网下载
- OPENWRT-LUCI开发总结-LUCI目录结构介绍
- C#.NET面试题：一批编号为1-100全部开关朝上（开）的灯进行以下操作： 开关编号凡是1的倍数反方向拨一次开关；若该编号也是2的倍数反方向又拨一次开关；若该编号又是3的倍数反方向又拨一次开关……
- Python八个自动化办公的技巧
- python字典统计单词个数_python字典统计单词个数
- 06蚂蚁-高性能Nginx服务器——1.反向代理
- Oracle-SQLLDR加载TPC-DS数据
- 【嵌入式Linux驱动开发】十五、实操Linux开发中的中断，编写第一个按键驱动程序
- X87 FPU 指令集
- SSD: Single Shot MultiBox Detector 论文翻译
- Python入门之控制结构-顺序与选择结构
- 开心网kaixin001.com外挂免费下载