JS如何操作class选择器的样式

在学习前端的知识的时候，发现使用JS无法操作class选择器的样式，刚开始还以为是js没有设置，只有在jquery可以操作呢？

看了一些相关文章才清楚：

document.getElementsByClassName拿到的是数组并非某一个对象

 var box = document.getElementsByClassName("box"); box.value; //返回undefined 

 1 var box = document.getElementsByClassName("box"); 2 box[0].value; //返回 box的内容

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4
 5 <p id="p1">Hello World!</p>
 6 <p class="p2">Hello World!</p>
 7
 8 <script>
 9 document.getElementById("p1").style.color="blue";
10
11 var sd=document.getElementsByClassName("p2");
12 sd[0].style.color="red";
13 sd[0].style.fontSize="30px";
14
15 </script>
16
17 <p>上面的段落已被一段脚本修改。</p>
18
19 </body>
20 </html>

jquery的操作方式是$(classSelector)，获取的是需要的那个对象

而我在使用JS忽略了最重要的class可复用，id不可复用原则。

所以js之前没做getElementByClassName也是出于严谨的考虑，现在document.getElementsByClassName返回数组应该也是出于严谨的考虑。

posted @ 2018-08-16 23:14 Octopus22 阅读(...) 评论(...) 编辑收藏

JS如何操作class选择器的样式相关推荐

html中js添加或删除activex,JS：操作样式表2 :用JS实现添加和删除一个类名的功能（addClass()和removeClass()）...
var box = document.getElementById("box"); box.id = "pox"; 将id = "box", ...
js DOM操作元素样式
element.style 行内样式操作 element.className 类名样式操作 1. element.style 上下文是获取到的元素: 通过element.style.某个css样式设 ...
DOM操作之属性和样式操作
在DOM操作,除了前面的节点操作以外,常常被用到的操作还有属性操作和节点操作,下面,主要来总结一下jQuery中的属性操作方法和样式操作方法. 在开始操作前,我们需要先在html中添加如下代码,后面所 ...
html中基本选择器的优先级,CSS_CSS中的各种选择器与样式优先级小结，优先级：由高到低(从上到下)- phpStudy...
CSS中的各种选择器与样式优先级小结优先级:由高到低(从上到下) !important 内联(1,0,0,0) id: (0,1,0,0) 类:(0,0,1,0) 伪类/属性元素:(0,0,0,1 ...
javascript中动态加载js、vbs脚本或者css样式表
目录:DynamicLoad类简介.属性.方法.事件.示例.下载. DynamicLoad类简介本文将为您介绍一个在javascript中可以动态加载js.vbs脚本和css样式表的DynamicL ...
超全的auto.js基础操作，目前是autoX.js的控制方式。2023年7月9日更新！(第2/4章)
02_auto.js基础操作2/4 文章目录 02_auto.js基础操作2/4 复杂界面待办事项登录界面界面模板用户调查一个小测试画布函数图像简单版函数图像高级版脚本引擎停止所有 ...
js如何操作表格（常用属性方法汇总）
js如何操作表格(常用属性方法汇总) 一.总结一句话总结: 二.表格相关的属性和方法 1.1 Table 对象集合 cells[] 返回包含表格中所有单元格的一个数组. 语法:tableObject ...
js样式会覆盖html样式,js实现html节点、CSS样式、事件的动态添加以及html覆盖层的添加...
(一)js实现html节点.CSS样式.事件的动态添加 ①场景描述:我们需要动态获取后台数据并将这些数据以列表方式展示,其中列表存在自己的列表样式,每个item都存在自己的点击事件.....那么在这种 ...
自动化办公之excel教程（3）：数据编辑操作，表格的美化操作，应用表格样式和单元格样式，制作报销汇总单
一.数据编辑操作 1.填充数据填充数据见上一节自动化办公之EXCEL教程(2):各种数据的输入,自动填充数据,表格操作小技巧 2.查找和替换数据第一步:开始选项卡里找到查找或者Ctil+F 第 ...

JS如何操作class选择器的样式

JS如何操作class选择器的样式

JS如何操作class选择器的样式相关推荐

最新文章

热门文章