示例2 查询多个元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
    <head>
        <title>访问元素</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .mycolor{
                color:#fff;
                
            }
            .steam{
                text-decoration: initial;
            }
        </style>
    </head>
    <body>
        <ul id="ul">
            <li id="a">油条</li>
            <li id="b" class="steam">包子</li>
            <li id="c" class="steam">米饺</li>
            <li id="d"><a>鱼粉</a></li>
        </ul>
        <script>
            // 返回多个元素节点
            var els = document.querySelectorAll('li.steam');
            els[0].className='mycolor';
        </script>
    </body>
</html>

按css查询多个元素的更多相关文章

  1. Javascript实例教程:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素，如果没有匹配的元素则返回null。

    文章简介:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素,如果没有匹配的元素则返回null. querySelector()方法接受一个CSS查询并返回匹配模式的第 ...

  2. 按CSS查询一个元素

    按CSS查询 示例1 查询一个 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 < ...

  3. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  4. 转载 【CSS进阶】伪元素的妙用--单标签之美

    1.单个颜色实现按钮 hover .active 的明暗变化 请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:a ...

  5. CSS中如何让元素隐藏

    在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.下面一个个列出,选一个适合你的 { display: none; /* 不 ...

  6. css构造块级元素

    css 1. 宽高width:数值;height:数值;也可用百分比!长高的设置不会被后代继承2. 背景(1)背景颜色background-color:颜色值;元素的背景颜色默认为transparen ...

  7. css margin-top设置html元素之间的距离

    css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离.这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例,需要的朋友可以参考一下. css ma ...

  8. CSS/CSS3 如何实现元素水平居中

    更新:可直接访问 [CSS/CSS3 如何实现元素水平居中] 查看效果,右键查看源代码 -------------------------------------------------分割线---- ...

  9. 用一个例子学习CSS的伪类元素

    CSS伪类元素是一个非常酷的东西!首先我们理解一下它,:before :after 伪类元素,也就是虚假的元素.它可以插入在元素的前面或者后面,而在HTML文档结构中,它却是不存在的,因为Js是无法通 ...

随机推荐

  1. IDEA重启说明

    1.点击File–>Invalidate Caches/Restart,进入重启窗口 2.选择自己所需要的重启方式,四个按钮,一共三种重启方式 按钮说明: Invalidate and Rest ...

  2. RabbitMQ的5种模式

    队列截图,去rabbitMq.com去找学习文档 =========================================================================== ...

  3. 超过20g的文件+上传

    demo下载地址:jsp-Eclipse,jsp-MyEclipse,PHP,ASP.NET 教程:ASP.NET,JSP,PHP 一. 功能性需求与非功能性需求 要求操作便利,一次选择多个文件和文件 ...

  4. 数据库学习之五--Union, Union All和Intersect

    一.定义 Union操作符用于合并两个或多个SELECT语句的结果集: 注:1. Union连接的Select语句之间必须拥有相同数量的列: 2. 列也必须拥有相似的数据类型: 3. 每条 SELEC ...

  5. P2679 子串 DP

    P2679 子串 DP 从字符串A中取出\(k\)段子串,按原顺序拼接,问存在多少个方案使拼接的字符串与字符串B相同 淦,又是这种字符串dp 设状态\(ans[i][j][k]\)表示A串位置\(i\ ...

  6. Cogs 2221. [SDOI2016 Round1] 数字配对(二分图)

    [SDOI2016 Round1] 数字配对 ★★★ 输入文件:menci_pair.in 输出文件:menci_pair.out 简单对比 时间限制:1 s 内存限制:128 MB [题目描述] 有 ...

  7. C++标准库分析总结(四)——<Vector、Array、Forward_list设计原则>

    本节主要总结标准库Vector和Array的设计方法和特性以及相关迭代器内部特征 1.Vector 1.1 Vector 内部实现 Vector是自增长的数组,其实在标准库中没有任何一种容器能原地扩充 ...

  8. yum安装nginx添加upstream_check_module模块

    下载模块 upstream_check_module 查看yum安装nginx版本信息 # nginx -V nginx version: nginx/1.17.0 built by gcc 4.8. ...

  9. .net core 资料网站 和 开源项目

    https://www.xcode.me/ 1.ASP.NET Core模块化前后端分离快速开发框架介绍之1.开篇 2.https://www.cnblogs.com/laozhang-is-phi/ ...

  10. SpringBoot + Vue前后端分离图片上传到本地并前端访问图片

    同理应该可用于其他文件 图片上传 application.yml 配置相关常量 prop: upload-folder: E:/test/ # 配置SpringMVC文件上传限制,默认1M.注意MB要 ...