JS：无法在“窗口”上执行“getComputedStyle”：参数不是“元素”类型，用于制作响应式 careusol答案

【问题标题】：JS: Failed to execute 'getComputedStyle' on 'Window': parameter is not of type 'Element' in making responsive careusolJS：无法在“窗口”上执行“getComputedStyle”：参数不是“元素”类型，用于制作响应式 careusol
【发布时间】：2021-08-24 00:03:53
【问题描述】：

**嘿，我在 react 中使用 js 制作了一个响应式轮播，但是当我运行此代码时出现错误简而言之：我试图理解为什么我得到这个 TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element' 当我运行我的代码时出现错误**

js 代码

const track = document.querySelector('.track');
let initialPosition = null;
let moving= false;
let transform=0;

const gestureStart = (e) =>{
    initialPosition  = e.pageX;
    moving = true;
    const transformMatrix = window.getComputedStyle(track).getPropertyValue('transform');
    console.log(transformMatrix)
    if(transformMatrix !== "none")
    transform = parseInt(transformMatrix.split(',')[4].trim())
}

 const getureMove = (e) =>{
    if(moving){
        const currentPosition = e.pageX;
        const diff = currentPosition - initialPosition;
        track.style.transform= `translateX(${transform + diff}px)`
    }
 }

 const  gestureEnd = (e) =>{
    moving =false;
 }

if(window.PointerEvent){
    window.addEventListener('pointerdown',gestureStart);
    window.addEventListener('pointermove',getureMove);
    window.addEventListener('pointerup',gestureEnd);
}
else{
    window.addEventListener('touchdown',gestureStart);
    window.addEventListener('touchmove',getureMove);
    window.addEventListener('touchup',gestureEnd);
    window.addEventListener('mousedown',gestureStart);
    window.addEventListener('mousemove',getureMove);
    window.addEventListener('mouseup',gestureEnd);
}

html代码

return (
    <div className="container">
        <div className="carousel">
            <div className="track">
                <div className="cards"></div>
                <div className="cards"></div>
                <div className="cards"></div>
                <div className="cards"></div>
                <div className="cards"></div>
                <div className="cards"></div>
                <div className="cards"></div>
                <div className="cards"></div>
                <div className="cards"></div>
                <div className="cards"></div>
                <div className="cards"></div>
                <div className="cards"></div>
            </div>
        </div>
    </div>
)

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您的代码正在运行，而 DOM 尚未准备好。

当 DOM 准备好时，选择器返回对象。

您可以使用此代码：

window.addEventListener('DOMContentLoaded', (event) => {
//Your JS code.
});

【讨论】：