JS获取标签类名（class）应注意的事项

最新推荐文章于 2024-05-07 17:38:03 发布

唐老鸡z

最新推荐文章于 2024-05-07 17:38:03 发布

阅读量5k

点赞数 4

分类专栏： JavaScript小知识文章标签：前端

本文链接：https://blog.csdn.net/Se7en_plus/article/details/115032580

版权

JavaScript小知识专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.示例

请将以下代码复制粘贴到自己的编译器上运行，便于理解。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <title>示例</title>
    <style type="text/css">
        .item{
            background-color: blue;
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
    <!-- 待变化的div -->
    <div class="item"></div>
    <div class="item"></div>

    <!-- 控制变化的button -->
    <button onclick="changeWidth()">改变宽度</button>

    <script type="text/javascript">
        function changeWidth() {
            document.getElementsByClassName('item')[0].style.width = '400px';
        }
    </script>
</body>
</html>

2.关键点

document.getElementsByClassName('item')[0].style.width = '400px';

获取的类名“item”是一个数组，应使用数组的角度去选择对应的类名

由示例可得：有两个div的类名都是class=“item”，但发生宽度变化的只有最上面的div，是因为选择类名时，使用下标[0]，选择了第一个div

对应代码为：

document.getElementsByClassName('item')[0];

由示例可知：获取类名，应首先判断顺序，而顺序由代码的上下排列构成，即下标[0],[1]

代码演示：

<!-- item[0] -->
<div class="item"></div>
<!-- item[1] -->
<div class="item"></div>

3.新手常见错误

仅仅获取了类名数组，而并没有用下标去选择对应的div，这会导致js控制无反应。往往这样的错误是由于惯性思维，使用了获取id的js代码，认为获取类名class也是同样的写法，但其实是错误的。

// 这样的写法是错的.
document.getElementsByClassName('item');

4.补充

// 与获取class同理.
document.getElementsByTagName('');

唐老鸡z

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
4
评论
JS获取标签类名（class）应注意的事项

1.示例请将以下代码复制粘贴到自己的编译器上运行，便于理解。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>示例</title> <style type="text/css"> .item{ background-color: blue; height: 200p
复制链接

扫一扫