我正在创建一个脚本，允许我在类中直接给出媒体大小和填充/边距值，而不是在 .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>
默认.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)}
}
@media (min-width: 993px) {
.l-padding {padding: var(--l_padding_value)}
.l-margin {margin : var(--l_margin_value)}
}
@media (min-width: 1281px) {
.xl-padding {padding: var(--xl_padding_value)}
.xl-margin {margin : var(--xl_margin_value)}
}
script.js:
$(document).ready(function() {
var media_sizes = ["s", "m", "l", "xl"];
$('[class*="padding-"]').each(function() {
var class_name = "padding";
var element_class_list = String($(this).attr('class')).split(' ');
var css = get_value_from_class_name(media_sizes, element_class_list, class_name);
var variable_name = css[0] ? css[0] + "_" + class_name : class_name;
var variable_value = css[2];
console.log(css);
set_css_of_class(variable_name, css[2]);
});
});
function set_css_of_class(variable_name, variable_value) {
var root = document.documentElement;
var root_style = getComputedStyle(root);
variable_name = "--" + variable_name;
root.style.setProperty(variable_name, variable_value, "important");
console.log(variable_name + ": " + root_style.getPropertyValue(variable_name));
}
function get_value_from_class_name(media_sizes, element_class_list, class_name) {
for (var i in element_class_list) {
/**
* if it's "padding" or "margin": create the css property
* else if it's a valid screen size: insert the css into the correct @media
*/
if (element_class_list[i].includes(class_name)) {
var media_size = "";
var class_name = element_class_list[i];
//console.log(class_name);
/**
* check if the class has any media size in it
*/
if (media_sizes.includes(element_class_list[i].substring(0, element_class_list[i].indexOf("-")))) {
media_size = element_class_list[i].substring(0, element_class_list[i].indexOf("-"));
// console.log("media_size: " + media_size);
for_a_specific_media = true;
element_class_list[i] = element_class_list[i].slice(media_size.length + 1, element_class_list[i].length);
}
var css_property = element_class_list[i].substring(
0,
element_class_list[i].indexOf("-"));
var css_value = element_class_list[i].substring(
element_class_list[i].indexOf("-") + 1,
element_class_list[element_class_list.lenght - 1]
);
css_value = css_value.replace(/-/g, "px ") + "px";
//console.log("element_class_list[i]: " + element_class_list[i]);
//console.log("css_value: " + css_value);
var css_final_property = css_property + ": " + css_value;
//console.log(css_final_property);
}
}
var array_return = [media_size, class_name, css_value];
return array_return;
}
脚本有效，但 div 没有获得新的填充值。我需要“重新加载”.css 文件吗？由于类的原因，div 不应该有新的填充吗？
最佳答案
您正在记录一个不存在的属性 (--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>关于javascript - 元素类中的 CSS @media - 使用 CSS 变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55656677/