How to get Javascript variable value into CSS?

问题

How can I have the time variable's contents displayed as the content property in my CSS?

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:

I'm not sure wether that's the best way to achieve what you want to do, as you could also use a container element and change its content directly:

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>

However, regarding the code you provided, to dynamically change the value of a 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>

回答2:

You can use CSS-Variables.

Can I use: http://caniuse.com/css-variables/embed

Docs: 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>

回答3:

You can use jquery to add in the content to your element

回答4:

You cannot access javascript variables from css, however you can set css style from javascript, take a look on JavaScript DOM CSS tutorial.

Alternatively you can use css pre-processors for that take a look on less, scss

回答5:

If you want to use the value of time in some css property then you can simple do that using javascript/jquery :

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

回答6:

Instead of adding a javascript value to your CSS (impossible), you can change your CSS value with javascript.

For example, you can use jQuery library and do changes in your html or CSS, according to the value.

回答7:

Not sure what you're going for, but if you want the value of time to appear on your page, formatted using your css, maybe this?

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

Or this?

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

Just guessing. Usually CSS defines how things are formatted, so I'm not sure what you're asking.

来源：https://stackoverflow.com/questions/44445820/how-to-get-javascript-variable-value-into-css

标签

javascript

css

pseudo-element