-1

我是编码新手，但我在使用 css 变量的项目中使用模板文字。此示例在函数内一次性设置所有变量。这是指输入都具有事件侦听器。

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

我想为跨度设置另一个规则以显示值。现在我正在像这样单独做每一个。

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

所有跨度的 id 都将是“this.name + 'Display'” 我想纠正一个使用文字一次设置它们的规则（类似于设置变量的规则），而不是编写 30 行代码。

我无法弄清楚在那里添加 Display 的语法，我不知道在哪里放置反勾号。

我认为这是可能的，因为 Javascript 中的几乎所有内容都是。谢谢你的时间。

4

1 回答 1

0

我假设您有一个执行此代码行的迭代：document.documentElement.style.setProperty(--${this.name}, this.value + suffix);

在此迭代中，您可以像这样设置跨度的值：

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

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

编辑： querySelector - 函数获取一个 css-selector 作为参数。[] - Brackets 是一个 css 选择器，它获取具有属性（在本例中为 id）和值（this.name）的元素。它们之间的 *= 表示您可以选择在属性值中具有子字符串的元素。

于 2017-06-02T21:59:52.530 回答