未捕获的类型错误:无法读取 null 的属性(读取“clientWidth”)

问题描述 投票:0回答:1
            <div id=" sliderContainer" class="w-10/12 overflow-hidden">
                <ul id="slider" class="flex w-full">
                    <li class=" p-5">
                        <div class="border rounded-lg p-5">
                            <img th:src="@{'/images/logo.png'}" class="h-28 w-full rounded-lg object-cover" alt="">
                            <h2 class="mt-2 font-bold text-center text-gray-700">Some BigHeadline</h2>

                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore maxime illo, incidunt

                            </p>
                            <button class="mt-3 px-6 py-3 rounded-md bg-green-800 text-white">Read More</button>
                        </div>
                    </li>

let sliderContainer = document.getElementById('sliderContainer');
let slider = document.getElementById('slider');
let cards = slider.getElementsByTagName('li');
let elementsToShow = 3;
let sliderContainerWidth = sliderContainer.clientWidth;
let cardWidth = sliderContainerWidth / elementsToShow;
slider.style.width = cards.length * cardWidth + 'px';
for (let index = 0; index < cards.length; index++) {
    const element = cards[index];
    element.style.width = cardWidth + 'px';
}

每当我尝试运行时,它都会显示无法读取 clientwidth 上的空引用 我尝试将脚本添加到代码底部

javascript null slider
1个回答
0
投票

div 容器 id 中的间距很小,请删除此处的小间距

  • 错误的方式 id="sliderContainer"
  • 正确的方式 id="sliderContainer"
© www.soinside.com 2019 - 2024. All rights reserved.