Свойство 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-свойств, вычисленное значение
будет не пустой строкой, а либо стандартным значением по-умолчанию, либо значением из встроенных стилей браузера (это обязательно следует помнить).