使用Javascript设置元素的宽度会产生意外结果

时间：2018-05-27 03:13:42

标签： javascript html css

我正在尝试为学校项目制作一个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>&larr;</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>&rarr;</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将其指定给style属性。然而，它并没有按照需要出现。所以我检查了对象的宽度。在谷歌开发工具中，它显示正确应用了样式。所以我试图通过getBoundingClientRect()得到它，它显示了一个不同的宽度。是因为我在父母身上使用百分比宽度？我尝试将其更改为像素宽度，但它不起作用。

我在控制台中打印出两个宽度值。如您所见，这两个宽度并不相同。我不明白为什么。我无法理解我做错了什么。任何指针都表示赞赏。我不知道在jquery中这是否会更容易，但我想避免它，因为我们的教授告诉我们如果可能的话就避免使用jquery。

1 个答案:

答案 0 :(得分：2)

您没有考虑next和prev div的宽度。你也应该从旋转木马的宽度中减去它。

基本上逻辑应该是

widthOfImg = (Totalwidth - Width of previous div - Width of next div )/this.number

还添加以下样式

body {
    margin :0;
}

也改变了这一行

rotate.style.width = "calc(100% - 32px)";

此外，不是将最大宽度应用于图像，而是将相同的宽度应用于您在carousel-img-holder div上添加的图像

i.childNodes[0].style.width= width ;

请参阅下面的更新代码

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>&larr;</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>&rarr;</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 = "calc(100% - 32px)";
			for (let i of this.selector.childNodes[1].childNodes){
				let height = this.selector.getBoundingClientRect().height+"px";
				let width = ( (this.selector.getBoundingClientRect().width - document.getElementsByClassName('next')[0].getBoundingClientRect().width - document.getElementsByClassName('previous')[0].getBoundingClientRect().width ) /this.number)+"px";

				i.setAttribute('style',`height: ${height};width: ${width}`);
				i.childNodes[0].style.width= width ;
				i.childNodes[0].style.width= width ;
			}
		}

	}

	const carousel = new Carousel("#carousel");
	carousel.makeCarousel();
<body style="background: #444;margin:0;">
	<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>

相关问题
最新问题