为什么我无法访问 document.querySelectorAll 的某些元素

Question

I'm new in programming and I would like to understand why I can access to some elements in a certain way and why I can't to some other in the same way.我是编程新手，我想了解为什么我可以以某种方式访问某些元素，而为什么我不能以相同的方式访问其他元素。

There is the code:有代码：

    const cImg = document.querySelectorAll('#cImg');
    console.log('c :', cImg);

    console.log('element : ', cImg['0'].offsetHeight);

    cImg.forEach(element => {
      console.log('e :', element.clientWidth);
    });

I see in the console.log of the "cImg", the elements offsetHeight and clientWidth我在“cImg”的 console.log 中看到元素offsetHeight和clientWidth

If I'm trying to log ofsetHeilght in the forEach I get this error如果我试图在forEach中记录 ofsetHeilght 我会收到此错误

but if I'm doing it like this: cImg['0'].offsetHeight I have the correct display "399" and if i want to see the element "clientWidht" in the forEach it works, I get the display "298"但如果我这样做： cImg['0'].offsetHeight我有正确的显示“399”，如果我想在forEach中看到元素“clientWidht”它可以工作，我得到显示“298”

I don't understand why, because both elements are in the "cImg array".我不明白为什么，因为这两个元素都在“cImg 数组”中。

Someone have an explication?有人解释一下吗？

Thanks a lot.非常感谢。

Answer 1

[edit] [编辑]

To get to the CSS in an element, through javascript, you need to go through element.style .要通过 javascript 获取元素中的 CSS，您需要通过element.style获取 go。

Try尝试

element.style.offsetHeight

[edit 2] No, it's not because to get CSS it's element.style.height and javascript can't get CSS code. [编辑 2] 不，这不是因为要获得 CSS 它的 element.style.height 和 javascript 无法获得 CSS 代码。 Too much wine a Saturday night.周六晚上酒太多。 :P :P

[edit 2] [编辑 2]

 function displayWidth() { const cImg = document.querySelectorAll('.cImg'); console.log('c:', cImg); if (cImg.length) { console.log('element: ', cImg[0].offsetHeight); cImg.forEach(element => { console.log('e:', element.clientWidth); }); } }

 <body onload="displayWidth()"> <div class="cImg"> askldajsldkjasdklasd </div> <div class="cImg"> askldajsldkjasdklasd </div> <div class="cImg"> askldajsldkjasdklasd </div> <div class="cImg"> askldajsldkjasdklasd </div> </body>

Without testing it, but each element can only have their each own unique id (if any).无需测试，但每个元素只能有自己的唯一 ID（如果有）。 What you can use with querySelectorAll is classes (among other things).您可以与 querySelectorAll 一起使用的是类（除其他外）。 So each person in a group of humans have their own unique name, but all belong the the class humans .所以人类群体中的每个人都有自己独特的名字，但都属于 class humans 。 Change id="cImg" to class="cImg" and do use querySelectorAll(".cImg") instead.将id="cImg"更改为class="cImg"并使用querySelectorAll(".cImg")代替。

为什么我无法访问 document.querySelectorAll 的某些元素

问题描述

1 个解决方案

解决方案1
2 2019-11-02 19:15:47

为什么我无法访问 document.querySelectorAll 的某些元素

问题描述

1 个解决方案

解决方案1 2 2019-11-02 19:15:47

解决方案1
2 2019-11-02 19:15:47