代码之家 › 专栏 › 技术社区 › Yuki.kuroshita

使用javascript设置元素宽度会产生意想不到的结果

css html javascript

Yuki.kuroshita · 技术社区 · 7 年前

我正在为一个学校项目制作一个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 ,除以 数据视图编号 值并使用将其指定给样式属性 setAttribute . 然而,它并没有如预期的那样出现。所以我检查了物体的宽度。在google dev工具中,它表明样式应用正确。所以我试着通过 getBoundingClientRect() 它的宽度完全不同。是因为我对父级使用了百分比宽度吗?我试着把它改成像素宽度,但没用。

我在控制台中打印出两个宽度值。如你所见,这两个宽度并不相等。我不明白为什么。我不明白我做错了什么。任何提示都会受到赞赏。我不知道这在jquery中是否更容易,但我想避免它,因为我们的教授告诉我们,如果可能的话,不要使用jquery。

1 回复 | 直到 7 年前

Nandita Sharma 7 年前

您没有考虑下一个和上一个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>