Разберём механику «перемещения» разделителя с помощью JavaScript. Чтобы получить этот эффект, нужно изменять стили двух элементов:

1. Менять левую координату ползунка-разделителя, чтобы он двигался вправо или влево.
2. Менять ширину блока с изображением-оригиналом так, чтобы граница фотографий оставалась под ползунком.

К счастью, мы подготовили очень удобную вёрстку, в которой начало координат у обоих блоков совпадает. Поэтому достаточно задавать одинаковые значения для левой координаты разделителя и ширины блока с оригиналом фото.

Чтобы изменить CSS-свойство элемента в скрипте, нужно обратиться к свойству style элемента. Например:

var element = document.querySelector('.photo-original');
element.style.width = '10px';

В этом коде элементу задаётся ширина 10px.

С помощью element.style можно и получать, и изменять значения свойств.

Но названия свойств в JavaScript не всегда совпадают с их названиями в CSS. Например, CSS-свойство left совпадает с style.left, но CSS-свойство baсkground-color уже отличается: style.backgroundColor.

Давайте подвигаем ползунок.