Как мне в цикле увеличить margin-left на 20%
 

Помогите пожалуйста

var contr = document.getElementsByTagName("article");
  var but = document.getElementById("but");
  for(var i = 0; i < contr.length; i++){
    contr[i].style.marginLeft =+20 + "%";
    }

Не работает вот эта штука. Она просто у всех 20 ставит. Подскажите как пройти циклом и увеличит исходное на 20

20% от чего? От исходной цифры? От ширины окна? От ширины элемета? calc(20% + n)?

Ну у меня стоит margin-left: 20% мне надо сделать 40%
Соответственно у кого стоит margin-left: 40% надо сделать 60%

Если прям в атриубуте style, то всё просто:

contr[i].style.marginLeft = +contr[i].style.marginLeft + 20 + "%";

Если же где-то в стилях, то всё становится веселей.

Ну вот мне надо что бы все блоки не съехались в один на 20%, а уехали каждый на 20%
https://jsfiddle.net/8wgwqsjh/

Пытаюсь тут сам слайдер написать

Там на кнопку нажать надо

Тогда всё печально, потому как getComputedStyle возвращает конкретные вычисленные пиксели, а шариться по подключённым стилям - гиблое дело.
Остаётся разве что использовать позиционирование:

var contr = document.getElementsByTagName("article");
  var but = document.getElementById("but");
  but.onclick= function(){
    for(var i = 0; i < contr.length; i++){
    contr[i].style.position = "relative";
    contr[i].style.left = "20%";
    }
  }