如何将 javascript 变量导入 CSS 并设置样式？答案

【问题标题】：How to import javascript variables into CSS and style them?如何将 javascript 变量导入 CSS 并设置样式？
【发布时间】：2021-12-11 16:58:50
【问题描述】：

我对 javascript 很陌生。我正在尝试创建一个网站，您可以在其中输入您出生的时间并以天为单位找出您的年龄。我的输出（变量）也在 JS 中，那么如何导入并在 CSS 中设置样式？

这是 Javascript 代码：

function ageInDays() {
  // variables
     var birthYear = prompt("What Year Were You Born In?");
     var ageInDayss = (2021 - birthYear) * 365;
     var textAnswerYikes = "Yikes... that's old"

 // variable CSS

 //text
    var h1 = document.createElement('h1');
    var textAnswer = document.createTextNode("You are " + ageInDayss + " days old. " + 
    textAnswerYikes)
    h1.setAttribute('id', 'ageInDays');
    h1.appendChild(textAnswer);
    document.getElementById('flex-box-result').appendChild(h1);
}

【问题讨论】：

请注意输出是 HTML 而不是 JS。尝试创建 p 元素而不是文本节点？ document.createElement('p') 然后你可以在 CSS 中设置样式。 developer.mozilla.org/en-US/docs/Learn/…
CSS 样式 HTML，而不是 JS。 JS 是纯代码，你不能用 CSS “样式化”它，这没有任何意义。你可以为你的h1、id="flex-box-result" 等元素设置样式，但是设置 JS 样式是无稽之谈。
@JeremyThille 你可以style console.log with css，但它仍然使用 HTML >_
但不是Javascript代码本身，是日志输出
@JeremyThille 但这就是我所说的？？？？

标签： javascript css dom import

【解决方案1】：

我假设您的“导入”意味着在 HTML 中包含您的 h1。如果是这样，您只需将 h1 附加到 HTML 正文或您希望在其中包含的任何其他 HTML 元素（例如 div）。

您的 JavaScript 文件：

//text
   var h1 = document.createElement('h1');
   // add inner text to your h1 using string template literal.
   h1.innerText = `You are ${ageInDayss} days old. ${textAnswerYikes}`;
   h1.setAttribute('id', 'ageInDays');

   document.body.append(h1) // <- append your h1 into HTML body or other HTML element
   document.getElementById('flex-box-result').appendChild(h1);

要设置 h1 的样式，您只需选择已分配给它的 ID (ageInDays) 并在 CSS 文件中设置样式。

您的 CSS 文件：

#ageInDays {
 /* your CSS styling code goes here */
}

希望这能回答你的问题。

【讨论】：