如何使用 JavaScript 更改动态创建的元素的高度？

Question

我动态创建了一个带有 6 根弦的指板。 使用 class of.string:before 给每一个高度 8px。 我如何给每个字符串一个从 stringGauge 数组中获取的高度值，以便在创建它们时，字符串的厚度（高度）增加？

高度需要使用伪 class 来分配，所以据我所知，我无法通过使用内联样式来解决这个问题。

 const root = document.documentElement; const fretboard = document.querySelector(".fretboard"); // The stringGauge array below contains the values I want to assign to each new string const stringGauge = [1, 2, 3, 6, 7, 8]; const instrumentTuningPresets = { Guitar: [4, 11, 7, 2, 9, 4], }; let selectedInstrument = "Guitar"; let numberOfStrings = instrumentTuningPresets[selectedInstrument].length; const app = { init() { this.setupFretboard(); }, setupFretboard() { fretboard.innerHTML = ""; // This creates the strings for the fretboard for (let i = 0; i < numberOfStrings; i++) { let string = tools.createElement("div"); string.classList.add("string"); fretboard.appendChild(string); // This loops throught the stringGauge array but only manages to assign the //last value in the array which is 8. Subtracting 1-5 from i (eg stringGauge[i-3]) // does change the height but for all of them. root.style.setProperty("--string-height", stringGauge[i]); } }, }; const tools = { createElement(el, content) { el = document.createElement(el); if (arguments.length > 1) { el.innerHTML = content; } return el; }, }; app.init();

 :root { --fretboard-height: 300; --string-height: 8; }.fretboard { display: flex; flex-direction: column; background-image: url(../assets/images/maple.jpg); width: 100%; min-width: 1500px; height: calc(var(--fretboard-height) * 1px); margin-top: 50px; }.string { display: flex; position: relative; width: 100%; height: 100%; }.string:before { content: ""; width: 100%; height: calc(var(--string-height) * 1px); background: linear-gradient(#eee, #999); box-shadow: 76px 3px 10px #806233; z-index: 1; position: absolute; top: calc(var(--string-top-position) * 1px); }

 <div class="fretboard"></div>

Answer 1

最基本的方法，无需更改现有代码，只需为您创建的 css 变量指定一个基于i索引的名称，然后使用第nth-child 选择器来定位每个字符串。 我正在做i+1以便于阅读，因为nth-child从 1 开始，而不是 0。

root.style.setProperty(`--string-height-${i+1}`, stringGauge[i]);

.string:nth-child(1):before {
    height: calc(var(--string-height-1) * 1px);
}

您可以使用Sass 循环使第nth-child逻辑更简洁。

这是一个片段，展示了让您入门的简单方法。

 const root = document.documentElement; const fretboard = document.querySelector(".fretboard"); // The stringGauge array below contains the values I want to assign to each new string const stringGauge = [1, 2, 3, 6, 7, 8]; const instrumentTuningPresets = { Guitar: [4, 11, 7, 2, 9, 4], }; let selectedInstrument = "Guitar"; let numberOfStrings = instrumentTuningPresets[selectedInstrument].length; const app = { init() { this.setupFretboard(); }, setupFretboard() { fretboard.innerHTML = ""; // This creates the strings for the fretboard for (let i = 0; i < numberOfStrings; i++) { let string = tools.createElement("div"); string.classList.add("string"); fretboard.appendChild(string); // This loops throught the stringGauge array but only manages to assign the //last value in the array which is 8. Subtracting 1-5 from i (eg stringGauge[i-3]) // does change the height but for all of them. root.style.setProperty(`--string-height-${i+1}`, stringGauge[i]); } }, }; const tools = { createElement(el, content) { el = document.createElement(el); if (arguments.length > 1) { el.innerHTML = content; } return el; }, }; app.init();

 :root { --fretboard-height: 300; }.fretboard { display: flex; flex-direction: column; background-image: url(../assets/images/maple.jpg); width: 100%; min-width: 1500px; height: calc(var(--fretboard-height) * 1px); margin-top: 50px; }.string { display: flex; position: relative; width: 100%; height: 100%; }.string:before { content: ""; width: 100%; background: linear-gradient(#eee, #999); box-shadow: 76px 3px 10px #806233; z-index: 1; position: absolute; top: calc(var(--string-top-position) * 1px); }.string:nth-child(1):before { height: calc(var(--string-height-1) * 1px); }.string:nth-child(2):before { height: calc(var(--string-height-2) * 1px); }.string:nth-child(3):before { height: calc(var(--string-height-3) * 1px); }.string:nth-child(4):before { height: calc(var(--string-height-4) * 1px); }.string:nth-child(5):before { height: calc(var(--string-height-5) * 1px); }.string:nth-child(6):before { height: calc(var(--string-height-6) * 1px); }

 <div class="fretboard"></div>