CODEWITHSUNDEEP
javascript
Rashu
Rashu

Reputation: 25

why I ain't able to access css style property in javaScript if condition?

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>

Upvotes: 1

Views: 23

Answers (1)

axtck
axtck

Reputation: 3965

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>

Upvotes: 1

Related Questions