通过CSS名称取元素的方法

最新推荐文章于 2024-06-07 10:30:53 发布

a50059074

最新推荐文章于 2024-06-07 10:30:53 发布

阅读量3.9k

点赞数 1

分类专栏： javascript Css 文章标签： css js

本文链接：https://blog.csdn.net/a50059074/article/details/80275846

版权

javascript 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

Css

1 篇文章 0 订阅

订阅专栏

总结了几种方法，先放方法，后面介绍区别。

1   doucment.getElementsByClassName("cssName");//cssName为css的名称
2.1 document.querySelector("标签名.cssName");//标签名指的是div,button,a,li这种
2.2 document.querySelector(".cssName");
3.1 document.querySelectorAll("标签名.cssName");
3.2 document.querySelectorAll(".cssName");

测试用的HTML：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<style>
.css1{
  width:100px;
  height:110px;
  background-color:#ccc;
}
.css2{
  width:100px;
  height:120px;
  background-color:#aab;
}
.css3{
  width:100px;
  height:130px;
  background-color:#bba;
}
</style>
</head>
<body>
<div class="css1">这是div.css1</div>
<div class="css2">这是div.css2</div>
<button class="css1">这是button.css1</button>
<div class="css3">这是div.css3</div>
</body>
</html>

我们在Console中去运行JS然后看差别:

1.)第一种方法是比较常见也常用的，能取得整个页面匹配的元素，返回的是一个数组，测试文件中有两个元素引用了css1，所以输出了2

2.1)第二种方法则是取第一个匹配符合标签名且符合css名称的元素，返回的是单个元素对象（注意，只取第一个匹配到的元素）

2.2)同样只取第一个匹配到的元素，返回单个元素对象，差别在于，这个没有标签名限制（注意：打css名的时候不能少了前面的那个点.）

3.1取所有匹配标签名且匹配css名的元素，返回数组对象

3.2 同理，取所有符合css名称的对象，返回一个数组，这方法与第1种方法效果一样（具体差别就不清楚了）

总结：第一种方法和最后一种（3.2）效果一样，而2.1,2.2,3.1都是根据自己的需求而使用

a50059074

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
通过CSS名称取元素的方法

总结了几种方法，先放方法，后面介绍区别。1 doucment.getElementsByClassName("cssName");//cssName为css的名称2.1 document.querySelector("标签名.cssName");//标签名指的是div,button,a,li这种2.2 document.querySelector(".cssName");3.1 docu...
复制链接

扫一扫