如何将 Javascript 变量值转换为 CSS？答案

【问题标题】：How to get Javascript variable value into CSS?如何将 Javascript 变量值转换为 CSS？
【发布时间】：2026-01-29 07:40:02
【问题描述】：

如何在我的 CSS 中将 time 变量的内容显示为 content 属性？

JavaScript：

function clock(){
    var d = new Date();
    var hour = d.getHours();
    var min = d.getMinutes();
    var time = hour + ":" + min;
}

CSS：

.screen{
    position: absolute;
    height: 75%;
    width: 75%;
    background: #98E8EE;
    top: 11.5%;
    left: 12.5%;
}

.screen::after{
    color: #F9F5F4;
    font-size: 40px;
    content: ;
    font-family: Arial;
    margin-left: 36.5px;
    top: 20px;
    position: relative
}

【问题讨论】：

无法通过 CSS 获取价值，但可以通过 Javascript 操作 CSS
您能更详细地解释一下您要做什么吗？你想让时间出现在你的 CSS 中吗？这对大多数事情都不是很有用。您是否试图让时间出现在网页上？这是一个不同的问题......

标签： javascript css pseudo-element

【解决方案1】：

您可以使用 CSS 变量。

我可以使用： http://caniuse.com/css-variables/embed

文档： https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

const updateTime = () => {
  var d = new Date();
  var hour = d.getHours();
  var min = d.getMinutes();
  var second = d.getSeconds();
  var time = `${hour}:${min}:${second}`;
  
  // set CSS variable
  document.documentElement.style.setProperty(`--text`, `'${time}'`);
}

// initial call
updateTime();

// interval to update time
setInterval(updateTime, 1000);

:root {
  --text: '----';
}

.container {
  position: absolute;
  height: 75%;
  width: 75%;
  background: #98E8EE;
  top: 11.5%;
  left: 12.5%;
}

.container::after {
  content: var(--text);
  color: #F9F5F4;
  font-size: 40px;
  content: ;
  font-family: Arial;
  margin-left: 36.5px;
  top: 20px;
  position: relative
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <div class="container"></div>
  </body>
</html>

【讨论】：

【解决方案2】：

我不确定这是否是实现您想要做的最佳方式，因为您也可以使用容器元素并直接更改其内容：

const screenContentElement = document.getElementById('screen__content');
 
function pad(value) {
  const str = value + '';
  
  return str.length === 2 ? str : '0' + str;
}

function clock(){
  var d = new Date();
  
  return pad(d.getHours())
    + ':' + pad(d.getMinutes())
    + ':' + pad(d.getSeconds());
}

setInterval(() => {
  screenContentElement.innerText = clock();
}, 1000);

#screen {
  font-family: Arial, sans-serif;
  position: relative;
  height: 100%;
  width: 100%;
  background: #98E8EE;
  text-align: center;
  padding: 2rem 0;
}

#screen__content {
  color: #F9F5F4;
  font-size: 40px;
}

<div id="screen" class="screen">
  <span id="screen__content"></span>
</div>

但是，关于您提供的代码，要动态更改 CSS 伪元素中 content 属性的值，您可以将 attr() CSS function 与 data-* attribute 一起使用：

const screenElement = document.getElementById('screen');
 
function pad(value) {
  const str = value + '';
  
  return str.length === 2 ? str : '0' + str;
}

function clock(){
  var d = new Date();
  
  return pad(d.getHours())
    + ':' + pad(d.getMinutes())
    + ':' + pad(d.getSeconds());
}

setInterval(() => {
  screenElement.dataset.time = clock();
}, 1000);

#screen {
  font-family: Arial, sans-serif;
  position: relative;
  height: 100%;
  width: 100%;
  background: #98E8EE;
  text-align: center;
  padding: 2rem 0;
}

#screen::before {
  color: #F9F5F4;
  font-size: 40px;
  content: attr(data-time);
}

&lt;div id="screen"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

您可以使用 jquery 将内容添加到您的元素中

【讨论】：

【解决方案4】：

您无法从 css 访问 javascript 变量，但是您可以从 javascript 设置 css 样式，请查看JavaScript DOM CSS tutorial。

或者，您可以使用 css 预处理器来查看 less、scss

【讨论】：

我们能否从 Javascript 中获取价值并通过 Less/SASS 使用它

【解决方案5】：

如果您想在某些 css 属性中使用时间值，那么您可以使用 javascript/jquery 简单地做到这一点：

$("#SomeId or .SomeCLass").css("PropertyName",time);

【讨论】：

【解决方案6】：

您可以使用 javascript 更改 CSS 值，而不是向 CSS 中添加 javascript 值（不可能）。

例如，您可以使用 jQuery 库并根据值对您的 html 或 CSS 进行更改。

【讨论】：

不是不可能，但不是很实用。如果它在样式标签中，则 javascript 可以更改它...并且 js 也可以访问样式表...

【解决方案7】：

不确定您要做什么，但如果您希望时间值出现在您的页面上，使用您的 css 进行格式化，也许是这样？

document.write( '<p class="screen">' + time + '</p> );

还是这个？

var timeDiv = document.createElement('div'); timeDiv.classList.add('screen'); document.body.appendChild(timeDiv);

只是猜测。通常 CSS 定义了事物的格式，所以我不确定你在问什么。

【讨论】：