JavaScript怎么操作元素属性,样式和类名
这篇文章主要介绍了JavaScript怎么操作元素属性,样式和类名的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaScript怎么操作元素属性,样式和类名文章都会有所收获,下面我们一起来看看吧。
创新互联公司主打移动网站、网站制作、成都网站建设、网站改版、网络推广、网站维护、域名申请、等互联网信息服务,为各行业提供服务。在技术实力的保障下,我们为客户承诺稳定,放心的服务,根据网站的内容与功能再决定采用什么样的设计。最后,要实现符合网站需求的内容、功能与设计,我们还会规划稳定安全的技术方案做保障。
DOM - Document Object Model
一整套操作文档流的属性和方法
操作页面的标签(元素)
操作标签的增删改查
操作标签的属性(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怎么操作元素属性,样式和类名”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。
网页名称:JavaScript怎么操作元素属性,样式和类名
文章出自:http://pwwzsj.com/article/jjpjci.html