JS 根据类样式的名称获取元素

最新推荐文章于 2024-06-02 20:35:38 发布

夏沐_lk

最新推荐文章于 2024-06-02 20:35:38 发布

阅读量1.8w

点赞数 1

分类专栏： js代码文章标签： js 获取类引用相同的元素

本文链接：https://blog.csdn.net/guanmao4322/article/details/86436252

版权

js代码专栏收录该内容

65 篇文章 0 订阅

订阅专栏

使用函数介绍：document.getElementsByClassName("cls");获取class="cls"的元素对象

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    div {
      width: 200px;
      height: 50px;
      background-color: green;
      margin-top: 10px;
    }

    .cls {
      background-color: yellow;
    }
  </style>
</head>
<body>
<p>这是一个p</p>
<p class="cls">这是另一个p</p>
<span class="cls">这是第一个span</span><br/>
<span>这是第二个span</span><br/>
<div class="cls">这是第一个div</div>
<div>这是第二个div</div>
<input type="button" value="显示效果" id="btn"/><br/>
<script src="common.js"></script>
<script>

  //点击按钮设置应用cls类样式的标签的背景颜色为红色
  //getElementsByClassName();------>h5的

  my$("btn").onclick = function () {
    //根据类样式的名字来获取元素
    var objs = document.getElementsByClassName("cls");
    for (var i = 0; i < objs.length; i++) {
      //设置每个元素的背景颜色
      objs[i].style.backgroundColor = "red";
    }
  };
</script>
</body>
</html>

common.js

/**
 * 根据id属性的值,返回对应的标签元素
 * @param id id属性的值,string类型的
 * @returns {Element} 元素对象
 */
function my$(id) {
    return document.getElementById(id);
}

夏沐_lk

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS 根据类样式的名称获取元素

使用函数介绍：document.getElementsByClassName("cls");获取class="cls"的元素对象代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&amp
复制链接

扫一扫