JavaScript TypeError: says a CSS declaration returns as "null"-CodePudding

Here is the code in question that seems to be causing issues:

        player.style.height = playerH   "px";
        function trackXY(){
        for(let i=0; i<pokeS.length; i  ){
        let pokeS = document.getElementsByClassName('pikaStyle'   i);
        let xPlayer = parseInt(player.style.left   .5*player.style.width);
        let yPlayer = parseInt(player.style.top   .5*player.style.height);
        let xpokeS = parseInt(pokeS.style.left   .5*pokeS.style.width);
        let ypokeS = parseInt(pokeS.style.top   .5*pokeS.style.height);
        let rPlayer = .5*parseInt(player.style.height);
        let rpokeS = .5*parseInt(pokeS.style.height);
        let dX = xpokeS - xPlayer;
        let dY = ypokeS - yPlayer;
        let distance = Math.sqrt((dX*dX) (dY*dY))
        if(distance <= (rpokeS rPlayer)){
            alert("collison!"   pokeS.id);
        player.style.height = parseInt(player.style.height)   .5*parseInt(pokeS.style.height);
        }
      }
    }

it keeps either returning that "style" cannot be read or "left" is undefined. can someone advise? thanks.

CodePudding user response：

You should use window.getComputedStyle() and getPropertyValue to get the style. You can't directly use element.style.height, it will return nothing.

The Window.getComputedStyle() method returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain.

In your code, use:

window.getComputedStyle(player).getPropertyValue('height') 
window.getComputedStyle(pokeS).getPropertyValue('height')

Example:

let div = document.querySelector('div')
//return nothing
//console.log( div.style.height)
console.log(window.getComputedStyle(div).getPropertyValue('height'))

div{
height:50px;
}

<div></div>