js getelementsbytagname 找不到_Js交互特效案例实战之12九宫格布局

最新推荐文章于 2022-10-08 13:29:23 发布
最新推荐文章于 2022-10-08 13:29:23 发布
阅读量134 收藏
点赞数
文章标签： js getelementsbytagname 找不到
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_31292909/article/details/112079073
版权

d8a7d9d20b99dffb6d8eef066265e975.png

本节学习大纲

1、要求：实现九宫格布局

2、解题思路

3、搭建基础页面

4、实现九宫格布局-利用浮动

    4.1 先获取要用到的标签(按钮和图片)

    4.2 监听按钮的点击井实现浮动

5、浮动方法-整体代码显示

6、实现九宫格布局-利用定位

    6.1 找规律

    6.2 监听按钮的点击

    6.3 进行定位

7、定位方法-整体代码显示

1、要求：实现九宫格布局

页面的左上角有3个按钮，通过点击按钮来控制页面显示图片的列数。

2d3e574f4b7e10ccdb69d81acad4756b.gif

2、解题思路

想要实现九宫格布局，步骤：

1、搭建基础页面

2、获取要用到的标签

3、点击按钮实现布局，可以是点击按钮时，整体图片发生浮动，相应的总盒子的大小发生变化，要将图片分成几列，就让布局的宽度成为图片盒子宽度的几倍。

4、3个按钮操作是一样的，所以代码会发生冗余，利用函数消除冗余代码。

3、搭建基础页面

html><html><head><meta charset="utf-8"><title>title><style>
  * {margin: 0;padding: 0;
  }#pic {overflow: hidden;
  }#pic .pic_div {width: 240px;height: 350px;font-size: 14px;
  }#pic .pic_div .title {width: 240px;height: 30px;line-height: 30px;overflow: hidden;margin-bottom: 10px;
  }#pic .pic_div .pic_img {width: 240px;display: table-cell;text-align: center;
  }#pic .pic_div img {width: 200px;height: 200px;
  }#pic .pic_div p{text-align: center;
  }#pic .pic_div .price {color: red;font-weight: bold;font-size: 18px;
  }style>head><body><div class="cols"><button>3列button><button>4列button><button>5列button>div><div id="pic"><div class="pic_div"><div class="pic_img"><img src="image/1.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/4.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/5.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/1.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/2.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/3.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/4.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/5.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/1.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/2.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/3.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/4.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/5.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div>div>body>html>

此时的图片，并未发生浮动，基础页面搭建以后，页面展示为：

bd4c95dc8e3f43d3fffc28e853c5b91f.png

4、实现九宫格布局-利用浮动

4.1 先获取要用到的标签(按钮和图片)

<script type="text/javascript">// 1.获取要用的标签var btn = document.getElementsByTagName("button");console.log(btn); // 按钮的集合var pic_divs = document.getElementsByClassName("pic_div");console.log(pic_divs); // 图片盒子的集合script>

此时，从页面上可以看到，已经获取到了按钮和图片盒子的集合，页面展示为：

ee08f1a640488fe832494f12f9ca7416.png

4.2 监听按钮的点击并实现浮动

以第一个按钮为例，第一个按钮即btn[0]。点击第一个按钮时要分成3列，所有图片要进行浮动，所以要对图片进行遍历，图片靠左浮动，且整体的布局宽度变成3倍的图片盒子宽。

<script type="text/javascript">// 1.获取标签 点击button按钮，下方图片开始浮动var btn = document.getElementsByTagName("button");var pic_divs = document.getElementsByClassName("pic_div");// 2.监听按钮的点击
 btn[0].onclick = function() {// 循环，遍历图片，开始浮动for (i = 0; i    pic_divs[i].style.float = "left"; // 图片都想做浮动
   pic_divs[i].parentNode.style.width = (3 * pic_divs[i].offsetWidth) + "px"; // 图片盒子的父集节点宽度变为图片盒子的3倍
  }
 }script>

此时，点击3列的按钮，触发onclick事件，图片向左浮动，且呈3列显示。页面展示为：

a8885fc0daa78741db412bfc48678d28.gif

实现了3列按钮的，4列和5列按钮的代码一样，只是盒子的宽度变成能力4倍和5倍。代码如下，

<script type="text/javascript">// 1.获取要用的标签 var btn = document.getElementsByTagName("button");var pic_divs = document.getElementsByClassName("pic_div");// 2.监听按钮的点击
 btn[0].onclick = function() {// 循环，遍历图片，开始浮动for (i = 0; i    pic_divs[i].style.float = "left"; // 图片都想做浮动
   pic_divs[i].parentNode.style.width = (3 * pic_divs[i].offsetWidth) + "px"; // 图片盒子的父集节点宽度变为图片盒子的3倍
  }
 }
 btn[1].onclick = function() {// 循环，遍历图片，开始浮动for (i = 0; i    pic_divs[i].style.float = "left"; //开始浮动
   pic_divs[i].parentNode.style.width = (4 * pic_divs[i].offsetWidth) + "px";
  }
 }
 btn[2].onclick = function() {// 循环，遍历图片，开始浮动for (i = 0; i    pic_divs[i].style.float = "left"; //开始浮动
   pic_divs[i].parentNode.style.width = (5 * pic_divs[i].offsetWidth) + "px";
  }
 }script>

此时，点击按钮，实现图片分列排列。页面展示为：

2d3e574f4b7e10ccdb69d81acad4756b.gif

此时功能依然实现，但可以明显的看出js代码存在冗余问题。可以利用function函数来进行封装。然后每个onclick事件直接调用函数。

<script type="text/javascript">// 1.获取要用的标签 var btn = document.getElementsByTagName("button");var pic_divs = document.getElementsByClassName("pic_div");// 2.监听按钮的点击
 btn[0].onclick = function() {// 循环，遍历图片，开始浮动
  picOn(3);
 }
 btn[1].onclick = function() {// 循环，遍历图片，开始浮动
  picOn(4);
 }
 btn[2].onclick = function() {// 循环，遍历图片，开始浮动
  picOn(5);
 }function picOn(num) {for (i = 0; i    pic_divs[i].style.float = "left"; // 开始浮动
   pic_divs[i].parentNode.style.width = (num * pic_divs[i].offsetWidth) + "px";
  }
 }script>

此时就解决了代码冗余问题，利用浮动来完成九宫格布局的功能就实现了。

5、浮动方法-整体代码显示

html><head><meta charset="utf-8"><title>title><style>
            * {margin: 0;padding: 0;
            }#pic {overflow: hidden;
            }#pic .pic_div {width: 240px;height: 350px;font-size: 14px;
            }#pic .pic_div .title {width: 240px;height: 30px;line-height: 30px;overflow: hidden;margin-bottom: 10px;
            }#pic .pic_div .pic_img {width: 240px;display: table-cell;text-align: center;
            }#pic .pic_div img {width: 200px;height: 200px;
            }#pic .pic_div p{text-align: center;
            }#pic .pic_div .price {color: red;font-weight: bold;font-size: 18px;
            }style>head><body><div class="cols"><button>3列button><button>4列button><button>5列button>div><div id="pic"><div class="pic_div"><div class="pic_img"><img src="image/1.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/4.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/5.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/1.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/2.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/3.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/4.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/5.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/1.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/2.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/3.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/4.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/5.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div>div><script type="text/javascript">// 1.获取要用的标签 var btn = document.getElementsByTagName("button");var pic_divs = document.getElementsByClassName("pic_div");// 2.监听按钮的点击
   btn[0].onclick = function() {// 循环，遍历图片，开始浮动
    picOn(3);
   }
   btn[1].onclick = function() {// 循环，遍历图片，开始浮动
    picOn(4);
   }
   btn[2].onclick = function() {// 循环，遍历图片，开始浮动
    picOn(5);
   }function picOn(num) {for (i = 0; i      pic_divs[i].style.float = "left"; //开始浮动
     pic_divs[i].parentNode.style.width = (num * pic_divs[i].offsetWidth) + "px";
    }
   }script>body>html>

6、实现九宫格布局-利用定位

利用变化之后的规律来看，利用其每个图片盒子与最左边和最上边的距离，来定位。

要给整体的盒子做绝对定位：

html><html><head><meta charset="utf-8"><title>title><style>
  * {
   margin: 0;
   padding: 0;
  }
  #pic {
            position: relative; // 给整体盒子做绝对定位 
  }
  #pic .pic_div {
   width: 240px;
   height: 350px;
   font-size: 14px;
  }
  #pic .pic_div .title {
   width: 240px;
   height: 30px;
   line-height: 30px;
   overflow: hidden;
   margin-bottom: 10px;
  }
  #pic .pic_div .pic_img {
   width: 240px;
   display: table-cell;
   text-align: center;
  }
  #pic .pic_div img {
   width: 200px;
   height: 200px;
  }
  #pic .pic_div p{
   text-align: center;
  }
  #pic .pic_div .price {
   color: red;
   font-weight: bold;
   font-size: 18px;
  }style>head><body><div class="cols"><button>3列button><button>4列button><button>5列button>div><div id="pic"><div class="pic_div"><div class="pic_img"><img src="image/1.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/4.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/5.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/1.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/2.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/3.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/4.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/5.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/1.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/2.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/3.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/4.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/5.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div>div>body>html>

6.1 找规律

对于分成3列来说，每行3个图片。图片盒子的索引是从0开始的。

从每个pic_div到顶端和左边的距离和索引位置来看：

第1个图片，索引位置是0行0列，距离顶端和左边都是0个盒子的距离；top = 0 * h; left = 0 * w

第2个图片，索引位置是0行1列，距离顶端0个盒子，距离左边1个盒子的距离；top = 0 * h; left = 1 * w

第3个图片，索引位置是0行2列，距离顶端0个盒子，距离左边2个盒子的距离；top = 0 * h; left = 2 * w

第4个图片，索引位置是1行0列，距离顶端1个盒子，距离左边0个盒子的距离；top = 1 * h; left = 0 * w

第5个图片，索引位置是1行1列，距离顶端1个盒子，距离左边1个盒子的距离；top = 1 * h; left = 1 * w

第6个图片，索引位置是1行2列，距离顶端1个盒子，距离左边2个盒子的距离；top = 1 * h; left = 2 * w

....

以此类推

即，top值与行数相同，left值与列数相同。top = row * h; left = col * w。那么只要求出每个图片盒子的行数与列数就可以利用定位来得到图片盒子的位置。

比如第12个图片，索引号为13，索引位置是4行1列；

第13个图片，索引号为14，索引位置是4行2列；

即图片的行数为索引号除以3的整数，列数为索引号除以3的余数。

6.2 监听按钮的点击

同浮动方法一样，代码如下，

<script type="text/javascript">// 1.获取要用的标签 var btn = document.getElementsByTagName("button");var pic_divs = document.getElementsByClassName("pic_div");// 2.监听按钮的点击
    btn[0].onclick = function() {// 循环，遍历图片，开始浮动
        picOn(3);
    }
    btn[1].onclick = function() {// 循环，遍历图片，开始浮动
        picOn(4);
    }
    btn[2].onclick = function() {// 循环，遍历图片，开始浮动
        picOn(5);
    }script>

6.3 进行定位

<script type="text/javascript">function picOn(num) {for (i = 0; i             // 求每个盒子占的行数和列数var row = parseInt(i / num); // 取整，行数为索引号除以num的整数var col = parseInt(i % num); // 取余，列数为索引号除以num的余数// 设置定位，在当前父元素中的位置
            pic_divs[i].style.position = "absolute"; // 添加相对定位
            pic_divs[i].style.top = (row * pic_divs[i].offsetHeight) + "px";
            pic_divs[i].style.left = (col * pic_divs[i].offsetWidth) + "px";
        }
    }script>

如此就实现了功能。

7、定位方法-整体代码显示

html><html><head><meta charset="utf-8"><title>title><style>
            * {
                margin: 0;
                padding: 0;
            }
            #pic {
                position: relative; //给整体盒子做绝对定位 
            }
            #pic .pic_div {
                width: 240px;
                height: 350px;
                font-size: 14px;
            }
            #pic .pic_div .title {
                width: 240px;
                height: 30px;
                line-height: 30px;
                overflow: hidden;
                margin-bottom: 10px;
            }
            #pic .pic_div .pic_img {
                width: 240px;
                display: table-cell;
                text-align: center;
            }
            #pic .pic_div img {
                width: 200px;
                height: 200px;
            }
            #pic .pic_div p {
                text-align: center;
            }
            #pic .pic_div .price {
                color: red;
                font-weight: bold;
                font-size: 18px;
            }style>head><body><div class="cols"><button>3列button><button>4列button><button>5列button>div><div id="pic"><div class="pic_div"><div class="pic_img"><img src="image/1.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/4.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/5.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/1.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/2.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/3.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/4.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/5.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/1.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/2.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/3.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/4.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div><div class="pic_div"><div class="pic_img"><img src="image/5.jpg" alt="">div><p class="title">小花一朵p><p class="price">漂亮p>div>div><script type="text/javascript">// 1.获取要用的标签 var btn = document.getElementsByTagName("button");console.log(btn); // 按钮的集合var pic_divs = document.getElementsByClassName("pic_div");console.log(pic_divs); // 图片盒子的集合// 2.监听按钮的点击
            btn[0].onclick = function () {// 循环，遍历图片，开始浮动
                picOn(3);
            }
            btn[1].onclick = function () {
                picOn(4);
            }
            btn[2].onclick = function () {
                picOn(5);
            }function picOn(num) {// for (i = 0; i //  pic_divs[i].style.float = "left"; //开始浮动//  pic_divs[i].parentNode.style.width = (num * pic_divs[i].offsetWidth) + "px";// }for (i = 0; i                     // 求每个盒子占的行数和列数var row = parseInt(i / num); // 取整，行数为索引号除以num的整数var col = parseInt(i % num); // 取余，列数为索引号除以num的余数// 设置定位，在当前父元素中的位置
                    pic_divs[i].style.position = "absolute"; // 添加相对定位
                    pic_divs[i].style.top = (row * pic_divs[i].offsetHeight) + "px";
                    pic_divs[i].style.left = (col * pic_divs[i].offsetWidth) + "px";
                }
            }script>body>html>
二号方脑壳
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js getelementsbytagname 找不到_晓风轻面试系列 - 前端JS（2）回溯法
weixin_31819459的博客
12-26 189
本系列文章首发在公众号 晓风轻技术小站（xiaofengqingjava），欢迎关注。今天继续上次的话题，练习编程能力，今天的题目难度中高，后台开发也可以练习一下。重点练习 回溯法 ，不管是前后台，掌握了他，能解决很多问题，实在太好用了！！回溯法写法比较统一，就是循环对所有数据执行入栈，递归，然后出栈。多写几次就能顺利掌握。在树结构上找到指定节点的完整路径在上一题的基础上，找到从根节点到对应节点的...
IE中getElementsByTagName无法获取元素BUG
03-20
NULL 博文链接：https://snandy.iteye.com/blog/828393
javascript学习笔记——chrome等提示找不到“getElementsByTagName”的一种解决方法
w263044840的专栏
08-24 6204
最近学习是写了一个小网页，前台有个下拉框是通过后天的xml配置的，在写好代码后使用发现在IE9以及之前的IE浏览器都可以正常获取，但是IE10，chrome和firefox都会在获取一个标签时报getElementsByTagName方法不存在的错误。百度了很久未果，起初以为的确是这些浏览器不支持这个方法了，今天用IE10自带的调试工具对比了下载IE9和IE10下的变量，发现大不相同啊。 var
用脚本创建的元素在IE中用getElementsByName()获取不到
好风的老巢
04-23 2292
在程序中需要动态的创建一个复选框并在页面上显示，但是用document.getElementsByName()取的时候却取不到，经测试，在firefox和opera中是完全能够取到的，看来又是ie的问题了又试着创建了一个div，还是取不到，看来不光是表单元素有这个问题解决方式：用document.getElementsByTagName如下:var deleteButtonArra
关于javascript解析xml文件时找不到元素getElementsByTagName（）
sl_nevergiveup的专栏
09-24 1934
今天想通过服务器端的java代码输出一个xml文件，传到ajax客户端，可是在浏览器端通过getElementsByTagName方法怎么也找不到在xml中指定的结点名称。 纠结了俩小时以后…… 原来是因为xml文件中没有根节点。例如下面的xml文件是不正确的： 1
js-xml.rar_javascript_javascript xml_js xml_js解析xml_xml js
09-23
JavaScript是一种广泛应用于Web开发的脚本语言，主要在客户端运行，为用户提供动态交互体验。XML（eXtensible Markup Language）则是一种数据交换格式，常用于存储和传输结构化数据。"js-xml.rar"这个压缩包文件显然...
点击特效js_js点击特效_
09-30
通过将特效脚本`djtx.js`引入到`<head>`标签中，并对页面元素设置事件监听器，我们可以轻松地将这种特效应用于网页的不同部分。这种技术在现代网页设计中非常常见，也是前端开发者必备的技能之一。
JS实战篇之收缩菜单表单布局
11-29
在JavaScript实战中，创建一个收缩菜单表单布局是一项常见的任务，尤其在网页交互设计中。这个实例主要展示了如何利用JavaScript动态地控制HTML元素的显示与隐藏，实现菜单的展开和收缩效果。以下是对该实例中涉及...
javascript实现九宫格相加数值相等
11-22
在JavaScript编程中，实现九宫格相加数值相等是一个有趣的逻辑挑战，主要涉及数据验证、数组操作以及数学计算。以下是对实现这个功能的关键知识点的详细解析： 首先，我们需要理解九宫格的基本规则，它是一个3x3的...
JavaScript实战之菜单特效
10-21
在JavaScript实战中，创建动态和交互式的菜单特效是一项常见的任务，尤其对于提升用户体验至关重要。本文将探讨如何使用原生JavaScript实现一个带有动画效果的菜单，包括伸缩、鼠标悬停和点击事件。我们将分析给定的...
【Javascript】getElementById 和 getElementByClassName()[0] 的使用方法
kuyoru's blog
10-22 1686
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
JS中使用offsetHeight 获取元素高度为0问题
最新发布
m0_50981596的博客
10-08 2920
JS中使用offsetHeight 获取元素高度为0问题
getElementsByName、getElementsByClassNam、getElementsByTagName获取元素失败解决方法
YOL888666的博客
01-27 1830
getElementById返回的是单个元素，所以不需要下标 getElementsByName、getElementsByClassNam、getElementsByTagName返回的一个集合，所以尽管只有一个元素也需要添加下标，否则取不到该元素 ![在这里插入图片描述](https://img-blog.csdnimg.cn/73e28cf8dc4447bc8c4a06b346b192e1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,sh
Javascript当中的 getElementsByTagName() 方法
代码人生的博客
04-26 5878
定义和用法 getElementsByTagName() 方法可返回带有指定标签名的对象的集合。 语法 document.getElementsByTagName(tagname) 说明 getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。 如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。 提示和注释 注释：传递给 getElementsByTagNa

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值