元素类中的CSS @media-使用CSS变量
我正在创建一个脚本，该脚本允许我在类中提供媒体大小和填充/边距值，而不是在.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是否不应该因为该类而具有新的填充？
12345678_00013回答
-
一只萌萌小番薯
您正在记录的属性（--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> -
泛舟湖上清波郎朗
您应该将其包装在文档中。我尝试设置测试间隔，您不需要刷新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>
随时随地看视频慕课网APP
相关分类
JavaScript