Menu
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
}
400
You can't use a javascript variable inside your CSS file, Not to my knowledge.
Like most programming languages, native CSS now has support for variables, and they're here to stay. If you know a bit of CSS, chances are you've heard of CSS preprocessors such as Sass and Less. You've probably used them in your projects regardless of your frontend framework of choice.
JavaScript can interact with stylesheets, allowing you to write programs that change a document's style dynamically. There are three ways to do this: By working with the document's list of stylesheets—for example: adding, removing or modifying a stylesheet.
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>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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
