【发布时间】：2018-11-06 00:07:24
【问题描述】：
我正在尝试为学校项目制作 javascript 图像轮播。我正处于制作的早期阶段，但是我已经遇到了问题。
代码如下：
class Carousel{
constructor(selector=".carousel"){
const number = 5;
const autoscroll = 'off';
const width = "100%";
const height = "200px";
this.selector = document.querySelector(selector);
this.number = (this.selector.dataset.viewNumber==undefined)? number : this.selector.dataset.viewNumber;
this.autoScroll = (this.selector.dataset.autoscroll==undefined)? autoscroll : this.selector.dataset.autoscroll;
this.width = (this.selector.dataset.width==undefined)? width : this.selector.dataset.width;
this.height = (this.selector.dataset.height==undefined)? height : this.selector.dataset.height;
}
makeCarousel(){
let srcList=[];
let str = "<div class='previous'><p>←</p></div><div class='rotater'>";
let src;
for (let i of this.selector.children){
src = i.getAttribute("src");
srcList.push(src);
str= `${str}<div class='carousel-img-holder'><img src=${src} class='carousel-img' /></div>`;
}
str=`${str}</div><div class='next'><p>→</p></div>`;
this.selector.innerHTML = str;
const styler = this.selector.style;
styler.width = this.width;
styler.height = this.height;
styler.display = "flex";
const rotate = this.selector.childNodes[1];
rotate.style.display = "flex";
rotate.style.height = "100%";
rotate.style.width = "100%";
rotate.style.overflow = "scroll";
for (let i of this.selector.childNodes[1].childNodes){
let height = this.selector.getBoundingClientRect().height+"px";
let width = (this.selector.getBoundingClientRect().width/this.number)+"px";
i.setAttribute('style',`height: ${height};width: ${width}`);
i.childNodes[0].style.maxWidth = "100%";
i.childNodes[0].style.maxWidth = "100%";
}
}
}
const carousel = new Carousel("#carousel");
carousel.makeCarousel();
console.log("Width from getBoundingClientRect: "+document.querySelector(".carousel-img-holder").getBoundingClientRect().width)
console.log("Width from css style: "+document.querySelector(".carousel-img-holder").style.width)<body style="background: #444">
<div id="carousel" data-view-number=7 data-autoscroll="on" data-width="100%" data-height="200px">
<img src="https://swachhcoin.com/img/001.png">
<img src="https://swachhcoin.com/img/002.png">
<img src="https://swachhcoin.com/img/003.png">
<img src="https://swachhcoin.com/img/004.png">
<img src="https://swachhcoin.com/img/006.png">
<img src="https://swachhcoin.com/img/007.png">
<img src="https://swachhcoin.com/img/009.png">
<img src="https://swachhcoin.com/img/010.png">
<img src="https://swachhcoin.com/img/011.png">
<img src="https://swachhcoin.com/img/012.png">
<img src="https://swachhcoin.com/img/013.png">
<img src="https://swachhcoin.com/img/014.png">
<img src="https://swachhcoin.com/img/015.png">
</div>
</body>我试图一次只在一页上显示data-view-number 属性中提到的图像数量。所以我从getBoundingClientRect().width 计算外部div 的宽度，将其除以data-view-number 值并使用setAttribute 将其分配给样式属性。但是，它并没有按预期出现。所以我检查了物体的宽度。在谷歌开发工具中，显示样式已正确应用。所以我试图通过getBoundingClientRect() 得到它，它完全显示了不同的宽度。是因为我在父级上使用百分比宽度吗？我尝试将其更改为像素宽度，但它不起作用。
我在控制台中打印了两个宽度值。如您所见，这两个宽度并不相等。我不明白为什么。我不明白我做错了什么。任何指针表示赞赏。我不知道这在 jquery 中是否更容易，但我想避免它，因为我们的教授告诉我们尽可能避免使用 jquery。
【问题讨论】：
-
在 devtools 的 Computed 选项卡中检查宽度或使用
windows.getComputedStyle(DOMObject, propertyName)。这将显示是否有其他属性影响您的结果。 -
window.getComputedStyle(DOMObject).width 给了我宽度的值，但我不明白我应该如何使用它来调试@zer00ne
标签： javascript html css