console 命令行工具 X clear

console

//获取input元素
const inputs = document.querySelectorAll('.controls input');
function handleUpdate(){
	//处理后缀问题
  const suffix = this.dataset.sizing || '';
  //元素的value值->CSS变量->元素样式属性值
  document.documentElement.style.setProperty(`--${this.name}`,this.value + suffix)
  document.getElementById(`code-${this.name}`).innerText = this.value+suffix;
}
//错误：document.querySelector('input').addEventLinstener('')
//为每个input元素绑定事件
inputs.forEach(input => input.addEventListener('change',handleUpdate))
inputs.forEach(input =>input.addEventListener('mousemove',handleUpdate));
/**1.在.root伪类中设置全局CSS变量，元素样式中引用这些变量作为属性值，通过document.documentElement.style. setProperty来达到动态改变元素属性值的目的。**/

<body>
  <div class="controls">
    <label for="spacing">Spacing:</label>
    <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
    <label for="blur">Blur:</label>
    <input type="range" name="blur" min="0" max="25" value="10" data-sizing=“px”>
    <label for="base">Base:</label>
    <input type="color"name="base" value="#8aa8af">
    <br>
   <code class="result">
		img {
			padding: <label id="code-spacing">10px</label>;
			filter: blur(<label id="code-blur">10px</label>);
		  background: <label id="code-base">#8aa8af</label>;
		}
	</code>
  <img src="http://ofjku7mlm.bkt.clouddn.com/16-12-22/39048308-file_1482385934460_1316f.jpg">
  </div>
</body>

:root{
  --spacing:11px;
  --blur:5px;
  --base: #8aa8af;
}
img{
  padding:var(--spacing);
  background:var(--base);
  filter:var(--blur)
}
body {
      text-align: center;
    }
    body {
      background: #193549;
      color: white;
      font-family: 'helvetica neue', sans-serif;
      font-weight: 100;
      font-size: 1.5em;
    }
    .controls {
      margin-bottom: 1em;
    }
    input {
      width:100px;
    }