Question

我试图理解为什么下面的代码片段返回错误的值，而无论我使用clientWidth还是offsetWidth都没关系。

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

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

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

如果我将其导入我的脑袋，则无法正常工作。

最奇怪的事情是，当我使用defer属性将脚本导入到我的头部时，我将随机获得两个值（133px或450px），但只有450个是正确的。那么，这种影响从何而来呢？

如果需要回答我的问题，我现在将跳过相关的CSS，因为我不确定是否会这样：

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  margin: 0;
  font-size: 62.5%;
  font-family: 'Rochester';
  font-family: 'Open                            
#gen-info .container-carousel {
  overflow: hidden;
  width: 450px;
  height: auto;
  margin: auto;
  position: relative;
}

#gen-info .slides {
  display: flex;
  align-items: center;
  align-content: center;
}

#gen-info img {
  width: 450px;
  height: 300px;
}

#gen-info h3 {
  display: none;
  font-size: 1.4rem;
  text-align: center;
  margin: 15px 0 40px 0;
}

#gen-info .current-heading {
  display: block;
}


.prevBtn {
  position: absolute;
  top: 50%;
  z-index:2;
  left: 5%;
  font-size: 30px;
  color: white;

  opacity: 0.5;
  cursor: pointer;
}
.nextBtn {
  position: absolute;
  top: 50%;
  z-index:2;
  right: 5%;
  font-size: 30px;
  color: white;
  opacity: 0.5;
  cursor: pointer;
}


.nextBtn:hover {
  opacity: 1;
}
.prevBtn:hover {
  opacity: 1;
}

我也有媒体查询，但是没有，宽度为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>

//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);
}

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

0 个答案: