Блог

Главная - Вопросы по программированию - почему я не могу получить доступ к свойству стиля css в JavaScript, если условие?

почему я не могу получить доступ к свойству стиля css в JavaScript, если условие?

#javascript

#javascript

Вопрос:

Я просто пытаюсь напечатать hello world в консоли, поставив условие. Это не работает, я не знаю почему. Это работает должным образом вне условия. Но когда я пытаюсь напечатать сообщение, только если translateX равно 0px идентификатора item4. Если вы знаете причину, пожалуйста, помогите мне.

Мой код здесь:

 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. Взгляните на getComputedStyle

Ответ №1:

Вы можете использовать getComputedStyle для получения transform matrix значений (например: "matrix(1, 0, 0, 1, 20, 0)" ). Разделите его и очистите, чтобы получить только значения. Затем проверьте, равно ли значение для x (второе последнее значение [onlyVals.length - 2] ) указанному значению.

 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>

Метки: ,