Estoy tratando de obtener los valores de CSS de cada niño, hacer algunos cálculos y luego aplicarlos a cada niño.
Cuando intento asignar el valor CSS izquierdo a una variable llamada X usando jQuery, aparece este error:
Error de tipo no detectado: no se pudo ejecutar 'getComputedStyle' en 'Ventana': el parámetro 1 no es del tipo 'Elemento'.
Codigo de como lo hago
const wayps = document.querySelector('#waypoints'); const children = wayps.childNodes; var x,y,canvas_x,canvas_y,px_x,px_y; children.forEach(function(wayps) { x = $(wayps).css("left"); });Pero aplicar CSS a cada elemento dentro de la matriz funciona sin errores.
children.forEach(function(wayps) { console.log(wayps.innerText); // or $(wayps).css("left" , 0+"px"); });Código completo
const wayps = document.querySelector('#waypoints'); const children = wayps.childNodes; var x,y,canvas_x,canvas_y,px_x,px_y; children.forEach(function(wayps) { x = $(wayps).css("left"); x = x/2; $(wayps).css("left" , x+"px"); });HTML según lo solicitado
<div id="main"> <div id="map"> <div id="map_"> <div id="waypoints"> <div id="waypoint" class="waypoint_17" style="left: 0px; top: 0px;"></div> <div id="waypoint" class="waypoint_18" style="left: 0px; top: 0px;"></div> </div> </div> </div> <div id="frm"> </div> </div>¿Cómo resuelves este problema?
Resolví mi problema. Primero, reemplacé la identificación con una clase así:
<div id="waypoint" class="waypoint_17" style="left: 0px; top: 0px;"></div>con
<div class="waypoint" id="waypoint_17" style="left: 0px; top: 0px;"></div>Luego usé querySelectorAll en lugar de querySelector
document.querySelectorAll('.waypoint');Y finalmente, para hacer el cálculo, la forma correcta de obtener el valor de la izquierda es convertirlo en un número entero al hacerlo.
x = parseInt($(wayps).css('left'));Y finalmente el código de trabajo.
var waypsList = document.querySelectorAll('.waypoint'); [].forEach.call(waypsList, function(wayps) { x = parseInt($(wayps).css('left')); x = x/2; $(wayps).css("left" , x+"px"); });