gpt4 book ai didi

javascript - 使用带有原始 javascript 的 offsetWidth 属性设置元素的宽度

转载 作者:太空宇宙 更新时间:2023-11-04 07:38:16 24 4
gpt4 key购买 nike

我正在尝试使用纯 javascript 创建一个内容 slider 轮播,这个轮播必须是响应式的,为此,我使用了一些变量来设置和获取元素宽度。

因此,我使用 .offsetWidth 获得名为“ slider ”的容器宽度,之后,我使用一个循环将每个幻灯片宽度设置为与容器相同的宽度。为了让任何人都容易理解这是我的 HTML

function createSlider(id) {
var slider = document.getElementById(id),
sliderContainerWidth = parseInt(document.getElementById(id).offsetWidth),
ul = document.getElementById("carrousel"),
ulLength = ul.children.length,
i = 0;

console.log(sliderWidth);

function setUlWidth() {
ul.style.width = (sliderContainerWidth * ulLength);
}

function setLiWidth() {
for (i; i < ulLength; i++) {
ul.children[i].style.width = sliderContainerWidth;
//console.log(sliderContainerWidth)
}
}
setUlWidth();
setLiWidth();
}
createSlider('slider');
<div id="slider">
<ul id="carrousel">
<li>SLIDE 1</li>
<li style="background: #aaa;">SLIDE 2</li>
<li>SLIDE 3</li>
<li style="background: #aaa;">SLIDE 4</li>
</ul>
</div>

如果我尝试使用 offsetWidth 进行设置,则没有任何反应,但如果我使用固定值,则一切正常。

谁能帮帮我?

最佳答案

style.width 需要设置一个包含单位标记的字符串,在本例中为“px”表示像素:

  function setUlWidth() {
ul.style.width = (sliderContainerWidth * ulLength) +"px";
}

function setLiWidth() {
for (i; i < ulLength; i++) {
ul.children[i].style.width = sliderContainerWidth + "px";
console.log(sliderContainerWidth)
}
}

此外,FWIW,offsetWidth property of Element nodes是一个已经四舍五入为最接近的整数的数字 - 您不需要使用 parsInt 将其从字符串转换。

关于javascript - 使用带有原始 javascript 的 offsetWidth 属性设置元素的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48755303/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com