why I ain't able to access css style property in javaScript if condition?
Question
I am just trying to print hello world in console by putting condition. It is not working, I don't know why. It is work properly outside of condition. But when I try to print message only if translateX is equal to 0px of item4 id. If you know the reason, Please help me out.
My code here:
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>
1 answers
solution1
0 2021-12-02 13:46:56
You can use getComputedStyle to get the transform matrix values (for example: "matrix(1, 0, 0, 1, 20, 0)" ). Split it up and clean it so you only get the values. Then check if the value for x (second last value [onlyVals.length - 2] ) is equal to a specified value.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.