cssRules не может прочитать значения свойств нескольких классов стилей - PullRequest
Новая
       34

cssRules не может прочитать значения свойств нескольких классов стилей

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

С помощью этого ответа ( получить все значения свойств фона и цвета классов CSS * ) я могу получить значения свойств фона и цвета всех классов CSS.Это работает, когда я использую внутренние коды CSS.

Теперь у меня есть более 35 внешних таблиц стилей CSS.Когда я попробовал приведенный ниже код, он возвращает только первый вывод внешнего CSS-файла.Невозможно получить оставшиеся значения таблицы стилей и значения свойств цвета.Как получить доступ к остальным таблицам стилей? 

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

    let styles = document.styleSheets;

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

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

    let genCssStr='';
    genCssStr+= '<style> \n\n';
    cssArr.forEach(x=> genCssStr+=`${x.class}{\n` + 
      (x.background ? `  background:${invertColor(x.background)};\n` : '') + 
      (x.color ? `  color:${invertColor(x.color)};\n` : '') + `}\n\n`);
    genCssStr+= '</style>';

    console.log(styles);
    console.log(genCssStr);
    $(genCssStr).appendTo("body");
    // console.log("array:", JSON.stringify(cssArr));
    // console.log("text:\n\n", genCssStr);
});

Ответы [ 3 ]

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

Основная проблема заключается в том, что вы перебираете только первую таблицу стилей.Вам нужно перебрать все таблицы стилей. Также обратите внимание, что вы не можете перечислить cssRules свойство междоменных таблиц стилей .

Следующий код обрабатывает все правила CSS внутри всех таблиц стилей (<link rel> и <style>).Блок try...catch добавлен для игнорирования DOMExceptions, если внешняя таблица стилей недоступна: 

var cssArr = [];
[...document.styleSheets].forEach(function(styleSheet) {
  var cssRules;
  try {
    cssRules = styleSheet.cssRules;
  } catch (e) {
    console.log("Cannot process " + styleSheet.href);
    return;
  }
  [...cssRules].forEach(function(cssRule) {
    cssArr.push({
      class: cssRule.selectorText,
      background: cssRule.style.background,
      color: cssRule.style.color
    });
  });
});
console.log(cssArr);
0 голосов
/ 28 февраля 2019

Этот ответ описывает, почему некоторые правила могут быть недоступны.

Длинным и коротким является то, что если ресурсы CSS являются междоменными, то ограничения безопасности препятствуют доступу.

Кроме того, в этом ответе есть эта ссылка , которая описывает интерфейс таблицы стилей и в явном виде заявляет приведенное выше утверждение, где нельзя получить доступ к ресурсам из разных источников, и это относится к cssRules,среди других свойств объекта document.styleSheets.

Приведенный ниже код будет корректно перехватывать эту ошибку и выводить вывод ошибки или cssRule на консоль. 

for (let i in [...document.styleSheets]){
    try{
        console.log(styles[i]['cssRules']);
    }catch(e){
        console.log(e);
    }
}
0 голосов
/ 23 февраля 2019

Вы получаете доступ только к первому внешнему файлу, так как используете только индекс 0: styles[0].cssRules.Вы должны просмотреть все файлы следующим образом: 

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