3

Пишу страницу HTML. Код страницы, исполняемый js-код и код стилей в трех разных папках:

  • site.html
  • script/script.js
  • res/style.css

В HTML присутствуют два элемента:

<div class="red"  id="sqr1">       
  <img src="res/blue_square.png">       
</div>

...

<div>
  <input type="button" onclick="move_sqr('sqr1')" value="сдвиг"/>
</div>

Код стиля "red":

* {
    margin: 0;
    padding: 0;
}

.red{
    position: relative;
    left: 10px;
}

С помощью кода js хочу при нажатии кнопки сдвигать данное изображение вправо, увеличивая параметр left родительского элемента div. Непосредственно код:

function move_sqr(elem){
  var square = document.getElementById(elem);
  square.style.left = parseInt(square.style.left) + 30 + 'px';
}

Данная функция была взята из интернета, разобрана на мельчайшие частицы, но заставить ее работать я не смог. Из того, что я понял, square и square.style являются [object HTMLDivElement] и [object CSSStyleDeclaration] соответственно, однако square.style.left является пустым значением и div не сдвигается.

Подскажите пожалуйста, как это исправить.

2
  • 2
    попробуйте либо aбсолютное позиционирование, либо меняйте у элемента square.style.transform='translate(30px,0); 16 дек 2019 в 16:37
  • @StrangerintheQ, спасибо, помогло.
    – AnonimYs
    16 дек 2019 в 16:53

3 ответа 3

2

Свойство style DOM-объекта элемента, является интерфейсом доступа к его индивидуальным, инлайн-стилям.
То есть, к тем стилям, что изначально прописаны инлайном в атрибуте style в разметке элемента. Например:

const style = document.querySelector('#test').style; 
console.log(`style.left равно значению '${style.left}'`); 
console.log(`style.top равно значению '${style.top}'`); 
#test { position: relative; top: 50px; left: 10px; }
<div id="test" style="left: 30px;">🐱</div>

Обрати внимание, что в примере style.top содержит "ничего", пустую строку - хотя в общей CSS прописано значение 50px. Это та же "проблема", что и в вопросе. Так происходит как раз потому, что style ссылается на инлайновые стили самого элемента, а не на подходящее ему правило в CSSOM (объектной модели "общих" стилей).


Вариантом решения задачи из вопроса, может быть такое выражение:

square.style.left = (parseInt(square.style.left) || 0) + 30 + 'px';

Таким образом, если инлайном стилевое свойство не задано - вместо его значения будет подставлено 0, оператором || (логическое ИЛИ).


А для получения вычисленных (computed) стилей элемента, следует использовать глобальный метод getComputedStyle - он возвращает живой объект (то есть, значения в нем обновляются динамически):

const el = document.querySelector('#test'), 
      cs = getComputedStyle(el); 
console.log(`изначально, вычисленное значение top равно '${cs.top}'`); 
el.style.top = '25px'; 
console.log(`а после изменения style.top - равно значению '${cs.top}'`); 
#test { position: relative; top: 50px; left: 10px; }
<div id="test" style="left: 30px;">🐱</div>

Односложные свойства доступны через точку, как показано в примере. Для чтения из вычисленных стилей тех свойств, которые состоят из нескольких слов через дефис (например, box-shadow), можно применять нотации compStyles['box-shadow'], compStyles.boxShadow, или использовать специально предназначенный для этого метод getPropertyValue:

compStyles.getPropertyValue('box-shadow')

Вычисленные стили доступны только для чтения.
Для неинициализированных явно css-свойств, вычисленное значение будет не пустой строкой, а либо стандартным значением по-умолчанию, либо значением из встроенных стилей браузера (это обязательно следует помнить).

1

ANSW: по совету @StrangerintheQ изменил способ передвижения блока:

square.style.left = parseInt(square.style.left) + 30 + 'px';

заменил на:

tr += 30;
square.style.transform=`translate(${tr}px,0)`;

предварительно инициализируя tr=0

P.S. Почему square.style.left является нулевым - все еще непонятно. P.S.S @yar85 ниже прекрасно расписал все подробно

0
square.style.left = parseInt(square.style.left) + 30 + 'px';
square.style.left = parseInt(getComputedStyle(square).left) + 30 + 'px';

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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