如何使用 Javascript 添加 boxShadow 的多个阴影层

Question

我尝试构建一个 boxShadow 生成器，用户可以在其中添加多层 boxShadow。类似于下面的示例：

box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

我目前拥有的：

构造函数，创建我的阴影。

function Shadow(paramId) {
    this.shadowId = paramId;
    this.horizontalValue = 'horizontalRange' + paramId;
    this.verticalValue = 'verticalRange' + paramId;
    this.blurValue = 'blurRange' + paramId;
    this.spreadValue = 'spreadRange' + paramId;
    this.colorValue = 'colorInput' + paramId;
}

...和一个获取滑块值的函数：

function getRangeValue () {
    const shadowBox = document.getElementById('shadowBox');
    let shadowId = this.id.slice(this.id.length - 1, this.id.length) - 1; // my Id's are like xOffset1
    let xValue = document.getElementById(shadowObjContainer[shadowId].horizontalValue).value;
    let yValue = document.getElementById(shadowObjContainer[shadowId].verticalValue).value;
    let blurValue = document.getElementById(shadowObjContainer[shadowId].blurValue).value;
    let spreadValue = document.getElementById(shadowObjContainer[shadowId].spreadValue).value;
    let colorValue = document.getElementById(shadowObjContainer[shadowId].colorValue).value;
    
    shadowParam = `${xValue}px ${yValue}px ${blurValue}px ${spreadValue}px ${colorValue}`;
   
    shadowBox.style.boxShadow = shadowParam;
}

它确实有效，我的滑块执行它们应该执行的操作。但我不知道，如何创建另一个阴影参数 (", " + shadowParam).

希望有人能帮助我。谢谢:)

Answer 1

一个工作示例很有帮助。我假设了你的环境，这是我评论的想法。

// The class with all controls for each shadows
let Control = class {
  constructor(paramId) {
    this.shadowId = paramId;
    this.horizontalValue = 'horizontalRange' + paramId;
    this.verticalValue = 'verticalRange' + paramId;
    this.blurValue = 'blurRange' + paramId;
    this.spreadValue = 'spreadRange' + paramId;
    this.colorValue = 'colorInput' + paramId;
  }
}

// Generates the shadow for each initialized Control class 
function getRangeValue() {
  const shadowBox = document.getElementById('shadowBox');
  let shadowParam = '';
  for (let i = 0; i < Controls.length; i++) {
    let shadowId = Controls[i].shadowId;
    let xValue = document.getElementById(Controls[i].horizontalValue).value;
    let yValue = document.getElementById(Controls[i].verticalValue).value;
    let blurValue = document.getElementById(Controls[i].blurValue).value;
    let spreadValue = document.getElementById(Controls[i].spreadValue).value;
    let colorValue = document.getElementById(Controls[i].colorValue).value;

    shadowParam = (shadowParam == '' ? '' : shadowParam + ', ') + `${xValue}px ${yValue}px ${blurValue}px ${spreadValue}px ${colorValue}`;
  }
  shadowBox.style.boxShadow = shadowParam;
}

// Initialization of the Control classes based on the "group" of controls named "ShadowControls"
let ShadowControlsEl = document.getElementsByClassName("ShadowControls");
let Controls = Array();
for (let i = 0; i < ShadowControlsEl.length; i++) {
  Controls.push(new Control(i + 1));
}

// Generate the first Shadows
getRangeValue();

// Initialize listeners for values change
let AllControls = document.getElementsByClassName('listener');
for (let i = 0; i < AllControls.length; i++) {
  AllControls[i].addEventListener('change', getRangeValue);
}

#shadowBox {
    width: 100px;
    height: 100px;
    margin: 50px;
    background-color:#ff00ff;
}

<div class="ShadowControls">
  <input id="horizontalRange1"  class="listener" type="range" min="-100" max="100" value="10">
  <input id="verticalRange1"    class="listener" type="range" min="-100" max="100" value="10">
  <input id="blurRange1"        class="listener" type="range" min="0" max="100" value="0">
  <input id="spreadRange1"      class="listener" type="range" min="0" max="100" value="0">
  <input id="colorInput1"       class="listener" type="color" value="#FF0000">
</div>
<hr>
<div class="ShadowControls">
  <input id="horizontalRange2"  class="listener" type="range" min="-100" max="100" value="-10">
  <input id="verticalRange2"    class="listener" type="range" min="-100" max="100" value="-10">
  <input id="blurRange2"        class="listener" type="range" min="0" max="100" value="0">
  <input id="spreadRange2"      class="listener" type="range" min="0" max="100" value="0">
  <input id="colorInput2"       class="listener" type="color" value="#FFFF00">
</div>



<div id="shadowBox">
  Shadow here
</div>

如何使用 Javascript 添加 boxShadow 的多个阴影层

How to add multiple shadow layers of boxShadow with Javascript

javascript

javascript-objects