这篇文章主要介绍了JavaScript怎么操作元素属性,样式和类名的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript怎么操作元素属性,样式和类名文章都会有所收获，下面我们一起来看看吧。
创新互联公司主打移动网站、网站制作、成都网站建设、网站改版、网络推广、网站维护、域名申请、等互联网信息服务，为各行业提供服务。在技术实力的保障下，我们为客户承诺稳定，放心的服务，根据网站的内容与功能再决定采用什么样的设计。最后，要实现符合网站需求的内容、功能与设计，我们还会规划稳定安全的技术方案做保障。
一整套操作文档流的属性和方法
操作页面的标签(元素)
操作标签的增删改查
操作标签的属性(id, class, type, …)
操作标签的样式
…
认识一些内容
-document：文档流，页面，根节点，但不是元素(标签)
-html：承载所有标签的最大的元素，根元素节点
-head：专门承载当前页面的说明标签，这里的内容一般不显示在页面上
-body：专门承载当前页面的显示标签，真实显示在网页的内容
用一个变量保存页面中的某个或者某些元素
获取元素的方法分为两类
1、获取非常规元素
html：document.documentElement
head：document.head
body：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怎么操作元素属性,样式和类名”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。
