CODEWITHSUNDEEP
javascriptcsspseudo-element
RacconMan
RacconMan

Reputation: 133

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
}

Upvotes: 11

Views: 30289

Answers (7)

David Spector
David Spector

Reputation: 1672

A related issue is how to communicate a CSS value from JavaScript to CSS in real time (including for animation). Approach: use a property value ("variable") associated with the body element. Inherit it everywhere desired.

JS:

document.body.style.setProperty('--width1', '30px');

CSS:

#divA {width: var(--width1);}

Upvotes: 0

Philip
Philip

Reputation: 3536

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 = () => {
  const d = new Date();
  const time = d.toLocaleTimeString('en-US', { hour12: false });
  
  // 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>

Upvotes: 13

Danziger
Danziger

Reputation: 21171

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>

Upvotes: 5

Seanonymous
Seanonymous

Reputation: 1384

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.

Upvotes: 0

treecon
treecon

Reputation: 2835

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.

Upvotes: 0

Sudhanshu Saini
Sudhanshu Saini

Reputation: 63

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);

Upvotes: -1

Silencer310
Silencer310

Reputation: 1090

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

Upvotes: -1

Related Questions