双Splide滑块进度条报错：无法读取null的style属性

问题分析 #

第一个Splide滑块进度条运行正常，但第二个始终抛出错误：Uncaught TypeError: Cannot read properties of null (reading 'style')。核心原因是第二个进度条的DOM元素不在滑块的根容器内，代码中用testimonialSplide.root.querySelector('.testimonial-slider-progress-bar')无法定位到目标元素，返回null后尝试读取style属性就会触发报错。

解决方案 #

提供两种可行修复方式，根据布局需求选择：

方案1：调整HTML结构，将进度条移入滑块根容器 #

把进度条容器放到#testimonial-splide内部，这样root.querySelector就能正确找到进度条元素：

<section class="relative lg:py-32 md:py-24 sm:py-16 py-8 lg:px-36 md:px-8 px-4 bg-purple-th">
    <div class="relative w-full splide" id="testimonial-splide">
        <div class="splide__track">
            <ul class="splide__list">
            <?php
                while(have_rows('testimonials')) : the_row();
                    $testimonial = get_sub_field('testimonial');
                    $name = get_sub_field('name');
                    $company = get_sub_field('company');
                    $job_title = get_sub_field('job_title');
            ?>
            <div class="splide__slide relative w-full text-center lg:pt-16 pt-8 lg:px-36 md:px-24 px-4">
                <svg width="41" height="27" style="transform: translateX(-50%);" viewBox="0 0 41 27" fill="none" xmlns="http://www.w3.org/2000/svg" class="absolute top-0 left-1/2">
                    <path d="M17.2233 18.9599C17.2233 11.8199 9.67532 9.6779 5.39132 13.2479C5.69732 6.82189 9.47132 3.45589 15.5913 3.45589V0.191895C7.43132 0.191895 0.90332 5.3939 0.90332 16.8179C0.90332 22.4279 4.16732 26.3039 9.06332 26.3039C13.8573 26.3039 17.2233 22.8359 17.2233 18.9599ZM40.0713 18.9599C40.0713 11.8199 32.5233 9.6779 28.2393 13.2479C28.5453 6.82189 32.3193 3.45589 38.4393 3.45589V0.191895C30.2793 0.191895 23.7513 5.3939 23.7513 16.8179C23.7513 22.4279 27.0153 26.3039 31.9113 26.3039C36.7053 26.3039 40.0713 22.8359 40.0713 18.9599Z" fill="white"/>
                </svg>
                <p class="text-2xl lg:w-1/2 mx-auto md:w-3/4 w-full"><?php echo $testimonial ?></p>
                <p class="mb-0 mt-8 text-white"><?= $name ?>, <?= $company ?> - <?= $job_title ?></p>
            </div>
            <?php endwhile; ?>
            </ul>
        </div>
        <!-- 进度条移入滑块根容器 -->
        <div class="testimonial-slider-progress">
            <div class="testimonial-slider-progress-bar"></div>
        </div>
    </div>
</section>

方案2：修改JS选择器，直接全局定位进度条 #

如果不想调整HTML结构，将进度条的获取方式改为全局查找，避免依赖滑块根容器：

document.addEventListener('DOMContentLoaded', function () {
    var splide = new Splide( '#insights-slider', {
        perPage: 3,
        perMove: 1,
        pagination: false,
        arrows : false,
        breakpoints: {
            768: {
                perPage: 1,
            },
        }
    });

    var testimonialSplide = new Splide( '#testimonial-splide', {
        perPage: 1,
        perMove: 1,
        pagination: false,
        arrows : false,
        type: 'loop',
        autoplay: true,
        breakpoints: {
            768: {
                perPage: 1,
            },
        }
    });

    var bar = splide.root.querySelector( '.my-slider-progress-bar' );
    // 替换原testimonialBar的获取代码
    var testimonialBar = document.querySelector('#testimonial-splide + .testimonial-slider-progress .testimonial-slider-progress-bar');

    splide.on( 'mounted move', function () {
        var end = splide.Components.Controller.getEnd() + 1;
        bar.style.width = String( 100 * ( splide.index + 1 ) / end ) + '%';
    });

    testimonialSplide.on( 'mounted move', function () {
        var end = testimonialSplide.Components.Controller.getEnd() + 1;
        testimonialBar.style.width = String( 100 * ( testimonialSplide.index + 1 ) / end ) + '%';
    });

    splide.mount();
    testimonialSplide.mount();
});

原理说明 #

splide.root指向的是初始化时传入的选择器对应的DOM元素（即#testimonial-splide），原代码中进度条位于该元素外部，因此root.querySelector无法找到目标元素，返回null。上述两种方案分别通过调整DOM结构或选择器范围，确保能正确获取到进度条元素，从而解决报错。

内容的提问来源于stack exchange，提问作者Sam St Aubyn