Fatal编程技术网
  • javascript/
  • Javascript 元素类中的CSS@media-使用CSS变量

Javascript 元素类中的CSS@media-使用CSS变量

javascript html css

Javascript 元素类中的CSS@media-使用CSS变量,javascript,html,css,Javascript,Html,Css,我正在创建一个脚本，它允许我在类中为padding/margin提供一个媒体大小和值，而不是在.css文件中的每个@media中创建一个类 到目前为止，这： <div class="s-padding-0-30-60-0">Test</div> 以下是我的全部代码： index.html: <html> <head> <title>Index</title> <!-- View

我正在创建一个脚本，它允许我在类中为padding/margin提供一个媒体大小和值，而不是在.css文件中的每个@media中创建一个类

到目前为止，这：

<div class="s-padding-0-30-60-0">Test</div>
以下是我的全部代码：

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>

: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)}

}

$(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;

}
script.js:

   <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>

: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)}

}

$(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\u teste
）。相反，记录您实际使用的现有变量（
--example\u var
）

演示

var root=document.documentElement；
var root_style=getComputedStyle（root）；
setProperty（“--example_var”，“100px”，“important”）；
log（“--var\u teste:”+root\u style.getPropertyValue（“--example\u var”）

：根目录{
--示例_var:50px；
}
.示例_类{
填充：var（--示例_var）；
背景颜色：鲑鱼；
}


Lorem Ipsum
您应该将其包装在文档中。
我尝试设置测试间隔，您不需要刷新css



document.addEventListener（'DOMContentLoaded'，function（）{
var=10；
setInterval（函数（）{
var root=document.documentElement；
var root_style=getComputedStyle（root）；
setProperty（“--example_var”，（++padding）+“px”，“important”）；
console.clear（）；
log（“--var\u teste:”+root\u style.getPropertyValue（“--example\u var”）；
//返回“100px”
}, 1000);
}，假）

：根目录{
--示例_var:50px；
}
.示例_类{
填充：var（--示例_var）；
边框：1px纯红；
}


Lorem Ipsum
我为您的示例添加了一个
标记到
index.html
：



乱数假文


然后我用脚本创建了一个
default.js
。唯一的另一个变化是我使用了背景色，因为我觉得比较容易看出差异

default.css：


：根目录{
--例如：红色；
}
.示例_类{
背景色：var（--示例_var）；
}


default.js：


var root=document.documentElement；
var root_style=getComputedStyle（root）；
setProperty（“--example_var”，“blue”）；
log（“--var\u teste:”+root\u style.getPropertyValue（“--var\u teste”）；

你为什么要记录
--var_teste
？@JuanMendes-oops，只是一个打字错误。我会编辑这篇文章。它不会改变任何东西，但感谢您将其指向输出。请记住，如果答案对您有效，请将其标记为“已接受”。我已经在使用$（document）.ready（function（）{…}）但它不起作用：（您尝试过我的答案吗？是的，但在调整屏幕大小时，div似乎不会随着@media而改变