Solo estoy tratando de imprimir hola mundo en la consola poniendo la condición. No funciona, no sé por qué. Es el trabajo correctamente fuera de la condición. Pero cuando trato de imprimir el mensaje solo si translateX es igual a 0px de la identificación del elemento 4. Si sabes el motivo, por favor ayúdame.
Mi código aquí:
item4 = document.getElementsByClassName('items')[3] function leftarrow() { // not working if (item4.style.transform == 'translateX(0px)') { console.log("Hellow World") } } .items{ border: 2px solid red; text-align: center; width: 300px; height: 300px; position: absolute; background-color: yellow; transform: translateX(0px); } .contains{ border: 2px solid black; width: 310px; height: 310px; } #btn{ width: 100px; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Slider</title> </head> <body> <div id="screen" class="container"> <div id="main-div"> <button id="btn" onclick="leftarrow()"> print </button> <div class="contains"> <div id="item1" class="items">ItemBox 1</div> <div id="item2" class="items">ItemBox 2</div> <div id="item3" class="items">ItemBox 3</div> <div id="item4" class="items">ItemBox 4</div> </div> </div> </div> </body> <script src="index.js"></script> </html>Puede usar getComputedStyle para obtener los valores de la matrix de transform (por ejemplo: "matrix(1, 0, 0, 1, 20, 0)" ). Divídelo y límpialo para que solo obtengas los valores. Luego verifique si el valor de x (segundo último valor [onlyVals.length - 2] ) es igual a un valor especificado.
item4 = document.getElementsByClassName('items')[3] function leftarrow() { const transformMatrixVals = getComputedStyle(item4).transform.split(","); const onlyVals = transformMatrixVals.map(v => v.replace(/\D/g, "")); const xVal = onlyVals[onlyVals.length - 2]; // 20 if (xVal === "20") { console.log("Hello World"); } } leftarrow(); .items{ border: 2px solid red; text-align: center; width: 300px; height: 300px; position: absolute; background-color: yellow; transform: translateX(20px); } <div id="item1" class="items">ItemBox 1</div> <div id="item2" class="items">ItemBox 2</div> <div id="item3" class="items">ItemBox 3</div> <div id="item4" class="items">ItemBox 4</div>