logo标签列表

如何将Javascript变量值传递到CSS中？

javascriptcsspseudo-element
10

我该如何将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
}
1
你无法通过 CSS 获取值，但是你可以通过 Javascript 操作 CSS。 - P.S.
你能详细解释一下你想做什么吗？你想让时间出现在你的CSS中吗？对于大多数事情来说，这并不是非常有用的。你是想让时间出现在网页上吗？那是一个不同的问题... - Garrett McCullough
6个回答
12
你可以使用CSS变量。
"Can I use"查询：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>

5

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

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函数和data-*属性。请注意保留HTML标签，不要进行解释。 

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>

0
如果您想在某些CSS属性中使用时间值，则可以使用JavaScript / jQuery轻松实现：
$("#SomeId or .SomeCLass").css("PropertyName",time);
0
你可以使用jQuery将内容添加到你的元素中。
0

不要试图将JavaScript值添加到CSS中（这是不可能的），而是可以使用JavaScript更改CSS值。

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

不是不可能，但不是很实际。如果它在样式标签中，JavaScript可以更改它...并且JS也可以访问样式表... - yezzz
0

不确定您想要什么，但如果您希望时间的值以您的CSS格式显示在页面上，也许可以尝试这个：

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

或者这个？

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

只是猜测。通常CSS定义了如何格式化事物，所以我不确定您的问题是什么。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接