为什么这个 ejs 变量的 fontFamily 未定义？答案

【问题标题】：Why is the fontFamily of this ejs variable undefined?为什么这个 ejs 变量的 fontFamily 未定义？
【发布时间】：2022-01-05 18:35:28
【问题描述】：

我有一个网站，用户可以用他们喜欢的任何字体提交文本，当他们的文本加载到 ejs 文件时，它会以他们选择的字体显示文本。下面是选择字体的方法：

<label for="fonts">Choose a font:</label>
<select name="fontType" id="fonts">
  <option value="Verdana">Verdana</option>
  <option value="Times New Roman">Times New Roman</option>
  <option value="Georgia">Georgia</option>
</select>
<br><br>

其中，提交的文本和选择的字体都作为字符串值保存到MongoDB集群中。

在ejs文件中，用户提交的文本保存在变量t中，字体为变量font：

<% let t = numbers.usertext%> <% let font = numbers.fontType%>

其中“数字”是index.js文件提出的对象，形式为：

res.render("template.ejs", { numbers: numbers});

然后，稍后在 <script> 标记中，我定义了一些 JS 变量：

let t = "<%= t %>";  let font = "<%= font %>;"

我认为所有需要做的事情是这样的：

t.style.fontFamily = font;

但是，我收到“无法设置未定义的属性（设置'fontFamily'）”的错误消息，我不知道这是为什么。我可以通过使用selecter.style.fontFamily = font来改变一些<p>标签的字体没有问题，但是由于某种原因不能操作变量t的属性。

【问题讨论】：

标签： javascript html css fonts ejs

【解决方案1】：

style 是在 HTMLElement objects 上找到的属性，但 t 是 String（所以它的 style 属性是 undefined）。

如果你想对一些从 JS 字符串文字中得到的文本进行样式设置，你需要先把它放在 HTML 元素中。

【讨论】：

不，你不要'：这是一种选择，但你也可以留在 JS 方面，首先使用 t 成为所需的 HTML 元素，例如，let t = document.querySelector(...); 然后你可以设置 t.style.[...] 就可以了，不用把 JS 放在 HTML 元素中。