javascript设置和获取元素的样式,元素中定义样式表的属性名
DOM - Document Object Model
用于操作文档流的一整套属性和方法
操作页面的标签(元素)
添加、删除和检查标签。
操作的属性(id、类、类型等)
操作标签的样式
…
知道点什么。
-文档：文档流、页面、根节点，但不是元素(标记)
-html:承载所有标签的最大元素，根元素节点
-head:当前页面的描述标签，这里的内容一般不会显示在页面上。
-body:当前页面专用的显示标签，网页上实际显示的内容。
获取元素
用变量保存页面中的一个或一些元素。
有两种获取元素的方法。
1.获取非常规元素
html:document . documentelementhead:document . head body:document . body 2，获取常规元素
按id获取元素
语法：document.getElementById
返回值：如果页面上有id对应的元素，就是这个元素；如果不是，则为空。
根据类名获取元素。
语法：document . getelementsbyclassname( element class name )
返回值：必然是一个伪数组
如果页面上有对应于类名的元素，尽可能多的获取并在伪数组中返回它们。
如果页面上没有与类名对应的元素，则为空伪数组。
基于标记名获取元素。
语法：document.getelementsbytagname(标记名)
返回值：必然是一个伪数组
如果页面上有对应于标记名的元素，尽可能多的获取并在伪数组中返回它们。
如果页面上没有对应于标记名的元素，那么它就是一个空的伪数组。
根据选择器获取标签。
语法：document.queryselector(“选择器”)
返回值：如果页面上有对应于选择器的元素，则返回对应于选择器的第一个元素。
如果页面上没有选择器对应的元素，则为空。
根据选择器获取一组标签。
语法：document . query selector all( selector )
返回值：必然是一个伪数组
如果页面上有选择器对应的元素，尽可能多的获取并在伪数组中返回它们。
如果页面上没有对应于选择器的元素，则它是一个空的伪数组。
操作元素样式
JS中有三种风格的操作元素
1.获取元素的内联样式(只能获取内联样式)
2.获取元素的非内联样式(包括内联和非内联)
3.设置元素的样式(只能设置内嵌样式)
注意：当使用破折号命名样式时
转换为驼峰命名法
使用数组关联语法
获取元素内联样式。
语法：element.style.style样式
控制台. 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))。宽度)
console . log(window . getcomputedstyle(ele))。高度)
console . log(window . getcomputedstyle(ele))。字体大小)
console . log(window . getcomputedstyle(ELE)[ background-color ])设置元素样式(只能设置内联样式)
语法：元素。风格。风格名称=风格值ele。风格。BackgroundColor= red:
操作元素类名
目的：批量更换款式。
类名
本机属性的操作
因为JS中有一个关键词叫class，所以叫className，避免改名。
注意：类名的值是一个字符串，但是该字符串可以包含多个类名。
优等生名单
每个元素节点都有一个名为classList的属性。
是一种类似于主要组的数据结构，它存储这个元素的所有类名。
添加、删除、更改和搜索都是对classList的操作，并给出了一个专门的api。
添加：元素。classList.add(类名)
删除：元素。classList.remove(类名)
开关：元件。classList.toggle(类名)
——删掉你有的，加上你没有的。
相关：[JavaScript视频教程]
以上是JavaScript如何操作元素属性、样式、类名的详细说明。请多关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。