模板文字如何製作「通用規則」？

-1

我是新來編碼，但我在使用CSS變量的項目中使用模板文字。本例將一個鏡頭中的所有變量設置在一個函數內。這是指所有對它們都有eventlistener的輸入。模板文字如何製作「通用規則」？

document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);

我想要設置跨度的另一個規則來顯示值。現在我正在單獨做每一個這樣的事情。

heightDisplay.innerHTML = height.value + 'px'; 
widthDisplay.innerHTML = width.value + 'px';

所有跨度的ID將是「this.name +‘顯示’」我想正確的設置它們一次全部用文字（類似於設置變量的規則）的規則，而不是寫30行代碼。

我無法弄清楚在那裏添加顯示的語法，我不知道在哪裏放置返回刻度。

我認爲這是可能的，因爲幾乎所有的Javascript是。謝謝你的時間。

來源

2017-06-02 benjaminadk

你能提供整個html代碼嗎？ –

請告訴我們完整的代碼。什麼是「這個」，「後綴」，「高度」和「寬度」是什麼？ – Bergi

我認爲你有這個地方的代碼行執行迭代：document.documentElement.style.setProperty( - $ {this.name} , this.value + suffix);

在這個迭代，你可以設置你的跨距值是這樣的：

var Span = document.querySelector(`[id*= ${this.name}]`); 

Span.innerHTML = this.value+ "px";

編輯： querySelector - 函數獲取一個css選擇器作爲參數。 [] - Brackets是一個css選擇器，用於獲取具有屬性（在本例中爲id）和值（this.name）的元素。它們之間的* =意味着，您可以選擇一個在屬性值中包含子字符串的元素。

來源

2017-06-02 21:59:52

謝謝。有用。我不太明白。我們爲什麼利用Span？而且我還沒有在*之前的文字中使用[]。 – benjaminadk

我將遇到問題。我有一些跨度，我想要做的是將'deg'作爲標籤或根本沒有標籤。我可以手動輸入像'px'這樣的標籤，而不是'Span.innerHTML'使用'Span.prepend'？ – benjaminadk

所以你想在特殊情況下使用「deg」而不是「px」？然後，您需要在此代碼行之前添加一個if語句：'Span.innerHTML = this.value +「px」;'然後您必須決定是否需要「px」或deg。例如：'if（degInsteadOfPX）{Span.innerHTML = this.value +「deg」; } else {Span.innerHTML = this.value +「px」;}'請注意，您需要設置'degInsteadOfPX'並決定您是否需要deg或px。順便說一句，你可以標記我的答案是正確的（我正確回答你的問題:)） –

模板文字如何製作「通用規則」？

回答

相關問題