web-dev-qa-db-fra.com

Comment obtenir une valeur de variable Javascript en CSS?

Comment puis-je afficher le contenu de la variable time en tant que propriété content dans mon 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
}
javascriptcsspseudo-element
4
RacconMan

Je ne suis pas sûr que ce soit le meilleur moyen de réaliser ce que vous voulez faire, car vous pouvez également utiliser un élément conteneur et en modifier directement le contenu:

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>

Cependant, en ce qui concerne le code que vous avez fourni, pour modifier dynamiquement la valeur d'un content propriété dans un pseudo-élément CSS, vous pouvez utiliser la fonction CSS attr() avec un attribut data-* :

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>

5
Danziger

Vous pouvez utiliser des variables CSS. 

Puis-je utiliser: 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
Phil

Vous ne savez pas trop ce que vous allez faire, mais si vous voulez que la valeur du temps apparaisse sur votre page, formatée avec votre css, peut-être ceci?

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

Ou ca?

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

Juste deviner. Habituellement, CSS définit la façon dont les choses sont formatées, donc je ne suis pas sûr de ce que vous demandez.

0
Seanonymous

Vous ne pouvez pas accéder aux variables javascript à partir de css, mais vous pouvez définir le style css à partir de javascript. Jetez un oeil sur Tutoriel JavaScript DOM CSS .

Sinon, vous pouvez utiliser les pré-processeurs css pour jeter un oeil sur less , scss

0
Andriy Ivaneyko

Vous pouvez utiliser jQuery pour ajouter le contenu à votre élément

0
Silencer310

Si vous voulez utiliser la valeur time de certaines propriétés css, vous pouvez simplement le faire en utilisant javascript/jquery: 

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

Au lieu d'ajouter une valeur javascript à votre CSS (impossible), vous pouvez modifier votre valeur CSS avec javascript.

Par exemple, vous pouvez utiliser la bibliothèque jQuery et apporter des modifications à votre code HTML ou CSS, en fonction de la valeur.

0
treecon