我正在创建一个脚本，该脚本允许我在类中提供媒体大小和填充/边距值，而不是在.css文件中的每个@media内创建类。到目前为止，这：<div class="s-padding-0-30-60-0">Test</div>像这样的灵魂工作：@media (max-width: 600px) { .s-padding-0-30-60-0 { padding: 0px 30px 60px 0px !important; }}这是我的所有代码：index.html： <html> <head> <title>Index</title> <!-- Viewport --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Fonts --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- CSS --> <link rel="stylesheet" href="../Nucleo/css/materialize/materialize.css"> <link rel="stylesheet" href="../Nucleo/css/default.css"> <!-- JS --> <script src="../Nucleo/javascript/jquery/v3.1/jquery-3.1.1.js"></script> <script src="../Nucleo/javascript/glass/v0.1/glass.js"></script> <script src="../Nucleo/javascript/smartjs/v0.1/smartjs.js"></script> <script src="../Nucleo/javascript/respmjs/v0.2/respmjs.js"></script> <script src="../Nucleo/javascript/default.js"></script> </head> <body> <div class="red s-padding-30">red</div> <div class="green s-padding-0-30-60-0">green</div> <div class="blue s-padding-0-10-20-0">blue</div> </body> <script src="../Nucleo/javascript/materialize/v1.0/materialize.js"></script></html>default.css：:root { --padding_value: 0px; --margin_value: 0px; --s_padding_value: 0px; --s_margin_value: 0px; --m_padding_value: 0px; --m_margin_value: 0px; --l_padding_value: 0px; --l_margin_value: 0px; --xl_padding_value: 0px; --xl_margin_value: 0px; --cor: #ff0000;}@media (max-width: 600px) { .s-padding {padding: var(--s_padding_value)} .s-margin {margin : var(--s_margin_value)}}@media (min-width: 601px) { .m-padding {padding: var(--m_padding_value)} .m-margin {margin : var(--m_margin_value)}}该脚本可以工作，但是div不会获得新的填充值。我需要“重新加载” .css文件吗？div是否不应该因为该类而具有新的填充？
3 回答
一只萌萌小番薯
TA贡献1795条经验 获得超7个赞
您正在记录的属性（--var_teste）不存在。而是记录您实际使用的现有变量（--example_var）。
console.log("--var_teste: " + root_style.getPropertyValue("--example_var"));
演示版
var root = document.documentElement;
var root_style = getComputedStyle(root);
root.style.setProperty("--example_var", "100px", "important");
console.log("--var_teste: " + root_style.getPropertyValue("--example_var"));
:root {
--example_var: 50px;
}
.example_class {
padding: var(--example_var);
background-color: salmon;
}
<div class="example_class">Lorem Ipsum</div>
泛舟湖上清波郎朗
TA贡献1818条经验 获得超3个赞
您应该将其包装在文档中。我尝试设置测试间隔，您不需要刷新CSS。
document.addEventListener('DOMContentLoaded', function(){
var padding = 10;
setInterval(function(){
var root = document.documentElement;
var root_style = getComputedStyle(root);
root.style.setProperty("--example_var", (++padding) + "px", "important");
console.clear();
console.log("--var_teste: " + root_style.getPropertyValue("--example_var"));
//returns "100px"
}, 1000);
}, false);
:root {
--example_var : 50px;
}
.example_class {
padding: var(--example_var);
border: 1px solid red;
}
<div class="example_class">Lorem Ipsum</div>
添加回答
举报
0/150
提交
取消