Изменение переменных CSS / пользовательских свойств в jQuery

в моем приложении у меня есть некоторые параметры, которые я хотел поместить в переменные CSS с помощью jQuery. И я тоже хотел их прочесть.

у меня возникли проблемы с чтением значений переменных CSS и пробовал много вещей ... прежде чем я нашел решение в "вопросах, которые уже могут иметь ваш ответ", пока я набирал свой вопрос.

в любом случае, я приложил фрагмент, потому что мне нужно знать:
⋅ ⋅ ⋅ , Почему метод 1 не работает ?
⋅⋅⋅ Есть способ получить значение CSS var с помощью jQuery ?

Я чувствую, что ему не хватает простого решения для обработки CSS vars... я ошибаюсь ?
Конечно, я буду использовать решение javascript, если нет никакого способа. Но я хотел бы быть в этом уверен.
Заранее спасибо за любой ответ.

// This method doesn't work for writing CSS var.
$(":root").css("--color1", "red");
console.log(".css method on “:root”      :", $(":root").css("--color1"));

// This methods works for writing CSS var:
$(":root")[0].style.setProperty("--color2", "lime");
console.log("[0].style method on “:root” :", $(":root")[0].style.getPropertyValue('--color2'));
#p1 {
  background-color: var(--color1);
}

#p2 {
  background-color: var(--color2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body id="bodyID">
  <p id="p1">p with background --color1</p>
  <p id="p2">p with background --color2</p>
</body>

<html>
6
css css-variables javascript jquery

2 ответов

jQuery поддерживает только пользовательские свойства CSS в версия 3.2.0 и выше. Нет поддержки для них в 2.x или ранее, поэтому доступ к ним с .css() не будет работать в этих версиях. Если обновление jQuery не является опцией, вам нужно будет использовать встроенный style объект для доступа к ним.

$(":root").css("--color1", "red");
console.log(".css method on “:root”      :", $(":root").css("--color1"));

$(":root")[0].style.setProperty("--color2", "lime");
console.log("[0].style method on “:root” :", $(":root")[0].style.getPropertyValue('--color2'));
#p1 {
  background-color: var(--color1);
}

#p2 {
  background-color: var(--color2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<p id="p1">p with background --color1</p>
<p id="p2">p with background --color2</p>
6

As BoltClock упоминает в своем ответе, jQuery добавлена поддержка переменных CSS, начиная с версии 3.2.0.

но если по какой-то причине вы не можете перейти на более высокую версию, вы все равно можете расширить jQuery в $.fn.css метод для работы с пользовательскими свойствами.

Итак, вот моя попытка реализовать простое расширение, которое проверяет, является ли изменяемое свойство пользовательским свойством или нет (проверив, что он начинается с двумя дефисами!--9-->). Если это так, пользовательское свойство изменяется с помощью простого JS, иначе оно вызывает исходную реализацию $.fn.css.

(function() {
  var originalFnCss = $.fn.css;
  $.fn.css = function(prop, val) {

    // Check if the property being set is a CSS Variable.
    if (prop.indexOf("--") === 0) {
      if(val) {

        // Set the value if it is provided.
        for(var idx = 0; idx < this.length; idx++) {
          this[idx].style.setProperty(prop, val);
        }
      } else {

        // Get the computed value of the property.
        return window.getComputedStyle(this[0]).getPropertyValue(prop);
      }
    } else {
      return originalFnCss.apply(this, arguments);
    }
  };
}());

Примечание: на данный момент я протестировал это расширение с помощью jQuery 1.11.1, 2.2.4 и 3.1.1, но дайте мне знать, если вы обнаружите какие-либо ошибки, или если у вас есть какие-либо предложения.

теперь вам просто нужно добавить расширение сразу после импорта jQuery, или в любой момент до $.fn.css вызывается. Вот рабочий фрагмент:

(function() {
  var originalFnCss = $.fn.css;
  $.fn.css = function(prop, val) {

    // Check if the property being set is a CSS Variable.
    if (prop.indexOf("--") === 0) {
      if(val) {

        // Set the value if it is provided.
        for(var idx = 0; idx < this.length; idx++) {
          this[idx].style.setProperty(prop, val);
        }
      } else {

        // Get the computed value of the property.
        return window.getComputedStyle(this[0]).getPropertyValue(prop);
      }
    } else {
      return originalFnCss.apply(this, arguments);
    }
  };
}()); 

// This method doesn't work for writing CSS var.
$(":root").css("--color1", "red");
console.log(".css method on “:root”      :", $(":root").css("--color1"));

// This methods works for writing CSS var:
$(":root")[0].style.setProperty("--color2", "lime");
console.log("[0].style method on “:root” :", $(":root")[0].style.getPropertyValue('--color2'));
#p1 {
  background-color: var(--color1);
}

#p2 {
  background-color: var(--color2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body id="bodyID">
  <p id="p1">p with background --color1</p>
  <p id="p2">p with background --color2</p>
</body>

<html>
1