How do I get the value of a Javascript variable in CSS?
How can I add the content of a variable time
as a property content
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
}
source to share
I'm not sure what is the best way to achieve what you want to do, as you can 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, with regard to the code you provided, to dynamically change the value of a property content
in a pseudo-element, CSS
you can use attr()
a CSS function along with data-*
an 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>
source to share
You can use CSS-Variables.
May 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>
source to share
You cannot access javascript variables from css, however you can set css style from javascript, have a look at JavaScript DOM CSS tutorial .
Alternatively you can use css pre-processors for which look at less , scss
source to share
Not sure what you are going to do, but if you want the time value to appear on your page, formatted with your css, perhaps this?
document.write( '<p class="screen">' + time + '</p> );
Or that?
var timeDiv = document.createElement('div');
timeDiv.classList.add('screen');
document.body.appendChild(timeDiv);
Just guessing. Usually CSS determines how the data is formatted, so I'm not sure what you are asking.
source to share