получить все значения свойств фона и цвета для классов CSS - PullRequest
Новая
       52

получить все значения свойств фона и цвета для классов CSS

0 голосов
/ 19 февраля 2019

Я хочу получить все значения свойств фона и цвета всех объявлений CSS.

Например: 

    body {
      background: #fff;
    }
    .aaa {
      background: #dedede;
      color: #000
    }
    .text {
      color: #333;
      padding: 10px
    }

Я хочу получить вывод, подобный этому, и значения этих свойствнужно хранить в массиве. 

    body {
      background: #fff;
    }
    .aaa {
      background: #dedede;
      color: #000
    }
    .text {
      color: #333;
    }

Я пытался сделать это с помощью jQuery.Я могу получить значение свойства фона одного определенного класса, например .aaa или .text.Как я могу получить значения всех классов? 

$('#btn-invert').on('click', function() {
  var color = $("body").css("background");
  // var test = invertColor("#00a3fe"); 
  console.log(color); 
});

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019 
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery Tests</title>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script>
        $(function(){
            var myArray = [];
            $("*").each(function() {
                var oneArray = [];
                var tag = $(this).prop("tagName");
                var classname = $(this).attr("class") ? $(this).attr("class") : "N/A";
                var background = $(this).css("background-color");
                var color = $(this).css("color");

                oneArray["tag"] = tag;
                oneArray["classname"] = classname;
                oneArray["background"] = background;
                oneArray["color"] = color;

                myArray.push(oneArray);                                             
            });
            console.log(myArray);
        });
        </script>
        <style>
        body {
          background: #fff;
        }
        .myClass {
            background: #dedede;
            color: #000
        }
        .myClass2 {
            color: #333;
            background: #fff;
        }
        </style>
    </head>
    <body>
        <a class="myClass" href="#">link</a>
        <div class="myClass2"></div>
    </body>
</html>
0 голосов
/ 19 февраля 2019

Для чтения стиля используйте document.styleSheets, который содержит всю информацию (let cssArr=... во фрагменте).Когда вы читаете его в свой массив, вы можете генерировать строку из этого массива (let genCssStr во фрагменте).Цвета, читаемые таким образом, имеют формат, например rgb(255, 255, 255), поэтому нам нужно преобразовать их в шестнадцатеричные (rgbToHex src здесь ) 

const rgbToHex = (rgbStr) => rgbStr && '#'+rgbStr.slice(4,-1).split(',').map(x => (+x).toString(16).padStart(2, '0')).join('');

const styles = document.styleSheets;

let cssArr =[...styles[0].cssRules].map(x=> ({ 
  class:      x.selectorText, 
  color:      rgbToHex(x.style.color),
  background: rgbToHex(x.style.background),   
}));

let genCssStr=''; cssArr.forEach(x=> genCssStr+=`
${x.class} {
  ${(x.background ? 'background: '+x.background : '')}
  ${(x.color ? 'color: '+x.color : '')}
}
`.replace(/^  \n/gm,'')); // remove empty lines 

console.log("array:", JSON.stringify(cssArr));
console.log("text:\n", genCssStr);
body {
      background: #fff;
    }
    .aaa {
      background: #dedede;
      color: #000
    }
    .text {
      color: #333;
      padding: 10px
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...