如何将 Javascript 变量值转化为 CSS？

Question

如何让 time 变量的内容在我的 CSS 中显示为 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
}

Answer 1

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

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

Answer 2

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

Answer 3

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

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>

但是，对于您提供的代码，要动态更改content property in a CSS pseudo-element you can use the attr() CSS function together with a 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);
}

<div id="screen"></div>

Answer 4

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

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

Answer 5

您可以将 CSS 值更改为 javascript.

，而不是将 javascript 值添加到您的 CSS（不可能）

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

Answer 6

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

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

还是这个？

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

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

Answer 7

您可以使用 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>

如何将 Javascript 变量值转化为 CSS？

How to get Javascript variable value into CSS?

javascript

css

pseudo-element