JavaScript - CSS Generator

260

21 марта 2017, 13:32

Столкнулся с такой проблемой: у нас есть инпуты height, width, left, right. Для изменения значений через ползунок мы создаем функцию, достаем значение, а дальше что? Гляньте код, как делать? Пожалуйста, объясните понять не могу.

function sizeHeight() { 
    height = document.getElementById("height").value; 
     
}

@import url('https://fonts.googleapis.com/css?family=Open+Sans'); 
body{ 
  background: #1d1d1d; 
  margin: 0 auto; 
} 
.block{ 
  padding-left: 0px; 
  padding-right: 0px; 
  height: 100px; 
  width: 100px; 
  border: 1px solid #3d3d3d; 
  margin: 30px auto; 
  box-shadow: 0px 0px 30px rgba(0,0,0,0.5); 
} 
.button{ 
  margin: 0 auto; 
  width: 600px; 
  height: 300px; 
} 
input{ 
  display: block; 
} 
p{ 
  color: white; 
  float: left; 
  font-family: 'Open Sans', sans-serif; 
  margin-top: -1px; 
  padding-right: 10px; 
  text-transform: uppercase; 
}

<div class="block"></div> 
<hr/> 
<div class="button"> 
  <p>Height</p><input id="heigh" type="range" min="0" max="100" step="1" value="0" oninput="sizeHeight()"> 
  <p>Width</p><input id="width" type="range" min="0" max="100" step="1" value="0"> 
  <p>Left</p><input id="left" type="range" min="0" max="100" step="1" value="0"> 
  <p>Right</p><input id="right" type="range" min="0" max="100" step="1" value="0"> 
</div>

Answer 1

Как-то так:

function sizeHeight(hVal) { 
    block = document.getElementsByClassName("block")[0]; 
    block.style.height = hVal + "px"; 
}

@import url('https://fonts.googleapis.com/css?family=Open+Sans'); 
body{ 
  background: #1d1d1d; 
  margin: 0 auto; 
} 
.block{ 
  padding-left: 0px; 
  padding-right: 0px; 
  height: 100px; 
  width: 100px; 
  border: 1px solid #3d3d3d; 
  margin: 30px auto; 
  box-shadow: 0px 0px 30px rgba(0,0,0,0.5); 
} 
.button{ 
  margin: 0 auto; 
  width: 600px; 
  height: 300px; 
} 
input{ 
  display: block; 
} 
p{ 
  color: white; 
  float: left; 
  font-family: 'Open Sans', sans-serif; 
  margin-top: -1px; 
  padding-right: 10px; 
  text-transform: uppercase; 
}

<div class="block"></div> 
<hr/> 
<div class="button"> 
  <p>Height</p><input id="height" type="range" min="0" max="100" step="1" value="0" onchange="sizeHeight(this.value)"> 
  <p>Width</p><input id="width" type="range" min="0" max="100" step="1" value="0"> 
  <p>Left</p><input id="left" type="range" min="0" max="100" step="1" value="0"> 
  <p>Right</p><input id="right" type="range" min="0" max="100" step="1" value="0"> 
</div>

Answer 2

Делегировать событие input от блока .button к инпутам, ловить всплывающее событие при помощи e.target.
Проверять айди инпута и менять соответствующие свойства.
Использовать вместо left/right transform: translateX(Xpx).

var block = document.querySelector('.block'), 
    btn = document.querySelector('.button'); 
 
btn.addEventListener('input', setProperties); 
 
function setProperties(e) { 
  var prop, val; 
   
  if( e.target.matches('input[type=range]') ) { 
    prop = e.target.id, 
    val = e.target.value + 'px'; 
     
    if (prop === 'left') block.style.transform = 'translateX(' + val + ')' 
    else if (prop === 'right') block.style.transform = 'translateX(-' + val + ')' 
    else block.style[prop] = val 
  } 
}

@import url('https://fonts.googleapis.com/css?family=Open+Sans'); 
body{ 
  background: #1d1d1d; 
  margin: 0 auto; 
} 
.block{ 
  padding-left: 0px; 
  padding-right: 0px; 
  height: 100px; 
  width: 100px; 
  border: 1px solid #3d3d3d; 
  margin: 30px auto; 
  box-shadow: 0px 0px 30px rgba(0,0,0,0.5); 
  position: relative; 
  transition: all .2s; 
} 
.button{ 
  margin: 0 auto; 
  width: 600px; 
  height: 300px; 
} 
input{ 
  display: block; 
} 
p{ 
  color: white; 
  float: left; 
  font-family: 'Open Sans', sans-serif; 
  margin-top: -1px; 
  padding-right: 10px; 
  text-transform: uppercase; 
}

<div class="block"></div> 
<hr/> 
<div class="button"> 
  <p>Height</p><input id="height" type="range" min="0" max="100" step="1" value="0"> 
  <p>Width</p><input id="width" type="range" min="0" max="100" step="1" value="0"> 
  <p>Left</p><input id="left" type="range" min="0" max="100" step="1" value="0"> 
  <p>Right</p><input id="right" type="range" min="0" max="100" step="1" value="0"> 
</div>