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

系统管理员 2022-03-25 15:40 413阅读 0赞

# [JS如何操作class选择器的样式][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>

![1456741-20180816231137020-364754547.png][]

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

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

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

![1456741-20180816231357376-940643935.png][]

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

[JS_class]: https://www.cnblogs.com/Octopus-22/p/9490768.html
[1456741-20180816231137020-364754547.png]: /images/20220325/3f2172921c38495091fee5b26437b5a6.png
[1456741-20180816231357376-940643935.png]: /images/20220325/566b20ed60b94fca9775b0c1ce848621.png
[Octopus22]: https://www.cnblogs.com/Octopus-22/
[Link 1]: https://i.cnblogs.com/EditPosts.aspx?postid=9490768

发表评论取消回复

表情：

评论列表（有 0 条评论，413人围观）

还没有评论，来说两句吧...

相关阅读

相关 css样式、选择器

目录一、css语法二、css样式 1、行内样式： 2、内部样式： 3、外部样式：三、css选择器基本选择器 1、标签选择器 2、类选择器 3、id选择

ゝ一纸荒年。/ 2024年04月06日 11:33/ 0 赞/ 77 阅读

相关使用 class 选择器设置样式

CSS 的class具有可重用性，可应用于各种 HTML 元素。在`<style>`样式声明区域里，创建了一个名为blue-text的class选择器。 blue-text

桃扇骨/ 2024年03月29日 16:01/ 0 赞/ 51 阅读

相关 html class选择器

要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。html class选择器class 选择器用于描述一组元素的样式，class

我就是我/ 2024年03月27日 10:38/ 0 赞/ 81 阅读

相关 jQuery基础01：选择器 + 样式操作 + 动画

1.1. jQuery 介绍 1.1.3 jQuery的优点 1. 轻量级。核心文件才几十kb，不会影响页面加载速度。 2. 跨浏览器兼容，基本兼容了现在主流的

Dear 丶/ 2022年12月18日 05:53/ 0 赞/ 130 阅读

相关 CSS 样式规则选择器

主要有三种：HTML选择器、class选择器、ID选择器 1.HTML选择器 1<html> 2 <head> 3 <style type=

柔光的暖阳◎/ 2022年07月15日 23:11/ 0 赞/ 234 阅读

相关 jQuery class选择器的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

骑猪看日落/ 2022年07月13日 10:23/ 0 赞/ 193 阅读

相关 CSS的class选择器

一介绍 class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。 class选择器在HTML中以class属性表示,在C

系统管理员/ 2022年05月12日 00:18/ 0 赞/ 148 阅读

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

[JS如何操作class选择器的样式][JS_class] 在学习前端的知识的时候，发现使用JS无法操作class选择器的样式，刚开始还以为是js没有设置，只有在jque

系统管理员/ 2022年03月25日 15:40/ 0 赞/ 414 阅读

相关 js 操作元素样式style、类名class

操作样式操作html的style属性中的样式添加样式对象名.style.去掉样式中的-，并-后的首字母为大写

系统管理员/ 2021年07月24日 13:14/ 0 赞/ 651 阅读

相关 Jquery选择器与样式操作

jquery选择器 jquery用法思想一选择某个网页元素，然后对它进行某种操作 jquery选择器 jquery选择器可以快速地选择元素，选择规则和css样

我不是女神ヾ/ 2021年07月04日 23:18/ 0 赞/ 427 阅读