0

Приведу на примере мою проблему. У меня есть див, которому я присвоил margin-left: 5px. Когда я делаю проверку на то, что свойство стиля меньше, чем '115px', то эта проверка не проходит и перебрасывается на else. Хотя логично, что 5px < 115px. При проверке != всё работает корректно. В чём моя ошибка?

function moveObject(){
    var objectVar = document.getElementsByClassName('block')[0];
    var objectProperty = document.getElementsByClassName('block')[0].style.marginLeft;
    var x = 1;

   if(objectProperty < '115px')
   {
    objectVar.style.marginLeft=x+objectProperty;
   }
    else
        {
            objectVar.style.marginTop='50px';
        }
}
.block{
    width: 100px;
    height: 100px;
    background-color: #000;
    margin: 5px;
    border: 2px solid grey;
}
<div class="block" style="background-color: #000; margin-left: 5px;">
    
    </div>
    <button id="btn" onclick="moveObject();">
        Начать
    </button>

1
  • ну, потому что 5px и 115px в вашем примере - это строки, а Вы их сравниваете как числовые значения 31 янв 2020 в 12:14

2 ответа 2

0

Нужно сначала привести style.marginLeft к числу и сравнивать это значение с числом, а уже на стадии проверки добавлять пиксели:

function moveObject(){
    var objectVar = document.getElementsByClassName('block')[0];
    var objectProperty = Number(objectVar.style.marginLeft.split('px')[0]);
    console.log(objectProperty)
    var x = 10;

   if(objectProperty < 115)
   {
    objectVar.style.marginLeft = x+objectProperty+'px';
   }
    else
        {
            objectVar.style.marginTop='50px';
        }
}
btn.onclick = function() {
  moveObject()
}
.block{
    width: 100px;
    height: 100px;
    background-color: #000;
    margin: 5px;
    border: 2px solid grey;
}
<div class="block" style="background-color: #000; margin-left: 5px;">
    
    </div>
    <button id="btn">
        Начать
    </button>

0

Чтобы число из строки вытащить, можно вот так сделать. Но стоит помнить, что с этим методом нужно быть осторожнее. В любой более сложной ситуации такое может ногу отстрелить

let sw1 = '115px';
let sw2 = '5px';

console.log(sw1 > sw2, typeof sw1, typeof sw2);

let nw1 = '115px';
let nw2 = '5px';

console.log(parseInt(sw1) > parseInt(sw2), typeof parseInt(sw1), typeof parseInt(sw2));

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.