Javascript clientWidth和offsetWidth的奇怪行为，为什么它们返回错误的值？_Javascript_Html_Css

Javascript clientWidth和offsetWidth的奇怪行为，为什么它们返回错误的值？

javascript html css

Javascript clientWidth和offsetWidth的奇怪行为，为什么它们返回错误的值？,javascript,html,css,Javascript,Html,Css,我试图理解为什么下面的代码段返回了错误的值，我使用的是clientWidth还是offsetWidth并不重要 const imgSize = document.querySelector('.slides').children[0].offsetWidth; console.log(imgSize); 重要的是我在哪里导入脚本。我发现只有在我在body标记末尾导入脚本时，它才会返回正确的值，此外，我还必须保留defer属性 <script src="../source/js/myJS.

我试图理解为什么下面的代码段返回了错误的值，我使用的是clientWidth还是offsetWidth并不重要

const imgSize = document.querySelector('.slides').children[0].offsetWidth;
console.log(imgSize);

重要的是我在哪里导入脚本。我发现只有在我在body标记末尾导入脚本时，它才会返回正确的值，此外，我还必须保留defer属性

<script src="../source/js/myJS.js" defer></script>

我也有媒体查询，但没有，宽度为133px

编辑：

Html

//head area

<head>
    <meta charset="utf-8" />
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="../source/css/style.css" />
    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans|Rochester&display=swap"
      rel="stylesheet"
    />
    <script
      src="https://kit.fontawesome.com/427c34389f.js"
      crossorigin="anonymous"
      defer
    ></script>
    <script src="../source/js/myJS.js" defer></script>

  </head>

// img area
<section id="gen-info">
<div class="container-carousel">
                        <i class="fas fa-arrow-left prevBtn"></i>
                        <i class="fas fa-arrow-right nextBtn"></i>
                        <div class="slides">
                            <img src="../source/img/gen-info/information/WinterAlt.jpg" alt="outsideHous">
                            <img src="../source/img/gen-info/information/feldberg.jpg" alt="Feldberg">
                            <img src="../source/img/gen-info/information/bspWinter2.jpg" alt="winterTitisee">
                            <img src="../source/img/gen-info/information/bspWinter1.jpg" alt="snowTrecking">
                        </div>
                    </div>
</section>

//头部区域
家
//img区域

//完成JS
const btnPrevList=document.queryselectoral（'.prevBtn'）；
const btnNextList=document.queryselectoral（'.nextBtn'）；
const slides=document.querySelectorAll（'.slides'）；
const imgSize=document.querySelector（'.slides'）。子项[0]。offsetWidth；
console.log（document.querySelector（'.slides'）.children[0]）；
console.log（imgSize）；
常量生成氯硝内酯=（img，c）=>{
const lastClone=img[img.length-1].cloneNode（）；
常量firstClone=img[0]。克隆节点（）；
lastClone.className='lastClone'；
firstClone.className='first clone'；
幻灯片[c].InsertAdjaceEntelement（'beforeend'，firstClone）；
幻灯片[c]。插入相邻元素（“afterbegin”，lastClone）；
};
const moveCarouselLeft=（）=>{
console.log（'left'）；
};
const moveCarouselRight=（）=>{
console.log（'right'）；
};
对于（c=0；c

document.querySelector（“.slides”）.children[0]是什么。。。i、当宽度错误时，它是一个

吗？它同时是一个img（相同的img），所以你

控制台.log（document.querySelector（'.slides'）.children[0]）

来确认代码运行时它是相同的图像，而不是依赖于检查DOM？是的，我控制台.log（document.querySelector（'.slides'）.children[0]）然后在正文末尾的script标记和头部的script标记中刷新我的代码一次。我有一个元素和两个宽度。我还使用console.dir（document.querySelector（'.slides'）.children[0]）来确认宽度。@JaromandaX我还将代码粘贴到问题中。

//head area

<head>
    <meta charset="utf-8" />
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="../source/css/style.css" />
    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans|Rochester&display=swap"
      rel="stylesheet"
    />
    <script
      src="https://kit.fontawesome.com/427c34389f.js"
      crossorigin="anonymous"
      defer
    ></script>
    <script src="../source/js/myJS.js" defer></script>

  </head>

// img area
<section id="gen-info">
<div class="container-carousel">
                        <i class="fas fa-arrow-left prevBtn"></i>
                        <i class="fas fa-arrow-right nextBtn"></i>
                        <div class="slides">
                            <img src="../source/img/gen-info/information/WinterAlt.jpg" alt="outsideHous">
                            <img src="../source/img/gen-info/information/feldberg.jpg" alt="Feldberg">
                            <img src="../source/img/gen-info/information/bspWinter2.jpg" alt="winterTitisee">
                            <img src="../source/img/gen-info/information/bspWinter1.jpg" alt="snowTrecking">
                        </div>
                    </div>
</section>

//complete JS


const btnPrevList = document.querySelectorAll('.prevBtn');
const btnNextList = document.querySelectorAll('.nextBtn');
const slides = document.querySelectorAll('.slides');
const imgSize = document.querySelector('.slides').children[0].offsetWidth;
console.log(document.querySelector('.slides').children[0]);
console.log(imgSize);



const makeCloneSlides = (img, c) => {
  const lastClone = img[img.length - 1].cloneNode();
  const firstClone = img[0].cloneNode();
  lastClone.className = 'last-clone';
  firstClone.className = 'first-clone';
  slides[c].insertAdjacentElement('beforeend', firstClone);
  slides[c].insertAdjacentElement('afterbegin', lastClone);
};

const moveCarouselLeft = () => {
  console.log('left');
};

const moveCarouselRight = () => {
  console.log('right');
};

for (c = 0; c < slides.length; c++) {
  let img = document.querySelectorAll('.slides')[c].children;
  makeCloneSlides(img, c);
  slides[c].style.transform = 'translateX(' + -imgSize + 'px)';
}

for (c = 0; c < btnPrevList.length; c++) {
  btnPrevList[c].addEventListener('click', moveCarouselLeft);
}

for (c = 0; c < btnNextList.length; c++) {
  btnNextList[c].addEventListener('click', moveCarouselRight);
}