如何将Javascript变量值导入CSS？
[英]How to get Javascript variable value into CSS?
问题描述
如何将time变量的内容显示为CSS中的content属性？
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
}
7 个解决方案
解决方案1
5 已采纳 2017-06-08 21:31:30
我不确定这是实现您想要做的事情的最佳方式，因为您还可以使用容器元素并直接更改其内容：
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>
但是，关于您提供的代码，要动态更改CSS伪元素中的content属性的值，您可以将attr() CSS函数与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>
解决方案2
4 2017-06-08 21:44:17
您可以使用CSS-Variables。
我可以使用： http ： //caniuse.com/css-variables/embed
文档： 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
0 2017-06-08 21:28:50
你无法从css访问javascript变量，但是你可以从javascript设置css样式，看看JavaScript DOM CSS教程 。
解决方案4
0 2017-06-08 21:29:57
您可以使用jquery将内容添加到元素中
解决方案5
0 2017-06-08 21:32:20
如果你想在某些css属性中使用time值，那么你可以使用javascript / jquery简单地做到这一点：
$("#SomeId or .SomeCLass").css("PropertyName",time);
解决方案6
0 2017-06-08 21:33:48
您可以使用javascript更改CSS值，而不是向CSS添加javascript值（不可能）。
例如，您可以使用jQuery库并根据值在html或CSS中进行更改。
解决方案7
0 2017-06-08 21:39:44
不知道你想要什么，但如果你想要在你的页面上显示时间值，使用你的css格式化，也许这个？
document.write( '<p class="screen">' + time + '</p> );
或这个？
var timeDiv = document.createElement('div'); timeDiv.classList.add('screen'); document.body.appendChild(timeDiv);
只是猜测。 通常CSS定义事物的格式，所以我不确定你在问什么。
如何从 css 变量中获取值并使用 javascript 多次（循环）自动更改它
[英]How can i get value from css variable and change it automatically in several times (loop) using javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何将 JavaScript 变量值添加到 CSS 变量？
如何在JavaScript中将JavaScript变量添加为CSS值
如何在javascript中获取变量值
如何获取 Javascript 变量中的 css class 内容？
如何从 css 变量中获取值并使用 javascript 多次（循环）自动更改它
如何使用javascript获取MetroUI CSS Datepicker值
如何在纯JavaScript中获取css属性值
如何在JavaScript中获取错误的CSS属性值？
用 JavaScript 得到一个 CSS 的值
将CSS值存储在JavaScript变量中
相关标签