>首页> IT >

今日热讯:详解JavaScript如何操作元素属性,样式和类名

时间:2022-08-06 09:56:18       来源:转载

DOM - Document Object Model

一整套操作文档流的属性和方法


(资料图)

操作页面的标签(元素) 操作标签的增删改查 操作标签的属性(id, class, type, …) 操作标签的样式 …

认识一些内容 -document:文档流,页面,根节点,但不是元素(标签) -html:承载所有标签的最大的元素,根元素节点 -head:专门承载当前页面的说明标签,这里的内容一般不显示在页面上 -body:专门承载当前页面的显示标签,真实显示在网页的内容

获取元素

用一个变量保存页面中的某个或者某些元素 获取元素的方法分为两类 1、获取非常规元素

html:document.documentElementhead:document.headbody:document.body

2、获取常规元素

根据 id 获取元素 语法:document.getElementById 返回值:如果页面上有 id 对应的元素,那么就是这个元素,如果没有就是 null

根据 类名 获取元素 语法:document.getElementsByClassName(‘元素类名’) 返回值:必然是一个伪数组如果页面上有 类名 对应的元素, 那么有多少获取多少, 放在伪数组内返回 如果页面上没有 类名 对应的元素, 那么就是一个空的伪数组

根据 标签名 获取元素 语法:document.getElementsByTagName(‘标签名’) 返回值:必然是一个伪数组如果页面上有 标签名 对应的元素, 那么有多少获取多少, 放在伪数组内返回 如果页面上没有 标签名 对应的元素, 那么就是一个空的伪数组

根据选择器获取 一个 标签 语法:document.querySelector(‘选择器’) 返回值:如果页面上有 选择器 对应的元素, 那么返回选择器对应的第一个元素 如果页面上没有 选择器 对应的元素, 那么就是 null

根据选择器获取 一组 标签 语法:document.querySelectorAll(‘选择器’) 返回值:必然是一个伪数组如果页面上有 选择器 对应的元素, 有多少获取多少, 放在一个伪数组内返回 如果页面上没有 选择器 对应的元素, 那么就是一个空的伪数组

操作元素样式

在 JS 内操作元素样式有三种 1、获取元素行内样式(只能获取到行内样式) 2、获取元素非行内样式(包含行内和非行内) 3、设置元素的样式(只能设置行内样式) 注意:涉及到带有中划线的样式名的时候 转换成驼峰命名法 使用数组关联语法

获取元素行内样式 语法:元素.style.样式名

console.log(ele.style.width)console.log(ele.style.height) // 非行内样式console.log(ele.style.fontSize)console.log(ele.style["font-size"])
·获取元素非行内样式 语法:window.getComputedStyle(要获取样式的元素).样式名
console.log(window.getComputedStyle(ele).width)console.log(window.getComputedStyle(ele).height)console.log(window.getComputedStyle(ele).fontSize)console.log(window.getComputedStyle(ele)["background-color"])
设置元素样式(只能设置行内样式) 语法:元素.style.样式名 = 样式值
ele.style.backgroundColor = "red"

操作元素类名

目的:批量给变样式

className 原生属性的操作 因为 JS 内有一个关键子叫做class,为了避开改名叫做className 注意:类名的值是一个字符串, 但是字符串中可能包含多个类名

classList 每一个 元素节点 身上自带一个属性叫做classList 是一个类似素组的数据结构,存放的是该元素的所有类名 增删改查都是对 classList 的操作,给出专用的api 增:元素.classList.add(类名) 删:元素.classList.remove(类名) 切换:元素.classList.toggle(类名) -原先有就删除,原先没有就增加

相关推荐:【JavaScript视频教程】

以上就是详解JavaScript如何操作元素属性,样式和类名的详细内容,更多请关注php中文网其它相关文章!

关键词: 就是一个 元素属性