如何使用 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>