js 中getAttribute和setAttribute属性

最新推荐文章于 2022-11-21 10:00:08 发布

Renkx0404

最新推荐文章于 2022-11-21 10:00:08 发布

阅读量906

点赞数

本文链接：https://blog.csdn.net/Renkx0404/article/details/73655578

版权

知识点：

getAttribute ：获取标签属性；
setAttribute ：设置标签属性；

用法实例：

<html lang="en">
        <head>
          <meta charset="UTF-8" />
          <title>Document</title>
        </head>
        <body>
           <a href="images/1.jpg">pic1</a>
           <a href="images/2.jpg">pic2</a>
           <a href="images/3.jpg">pic3</a>
           <a href="images/4.jpg">pic4</a>
           <a href="images/5.jpg">pic5</a>
           <br><br>
           <img src="images/1.jpg" alt="" id="pic">
        </body>
        </html>

这里写图片描述
实现效果是点击图中 pic1 pic2 pic3 pic4 pic5 切换到相应的图上
思路：
1. 点击事件
2. 获取img 和a的dom节点
var images=document.getElementById(‘pic’);
var aA=document.getElementsByTagName(‘a’);
3. 获取a标签中的href属性
var change=this.getAttribute(‘href’);
4. 将获取的a标签中的href属性赋值给img中的src属性
images.setAttribute(‘src’,change)

<script>
  window.onload=function(){
    var images=document.getElementById('pic');
    var aA=document.getElementsByTagName('a');
    for (var i = 0; i < aA.length; i++) {
      aA[i].onclick=function(){
        var change=this.getAttribute('href');
        images.setAttribute('src',change)
        return false;
      }
    }
  }
</script>

注意：这里的retrun false 是为了阻止a标签的默认事件（跳转）

Renkx0404

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js 中getAttribute和setAttribute属性

知识点：getAttribute ：获取标签属性；setAttribute ：设置标签属性；用法实例： <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body>
复制链接

扫一扫