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

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

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

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

Я чувствую, что ему не хватает простого решения для обработки переменных CSS… Я ошибаюсь?
Конечно, я буду использовать решение 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>


javascript jquery css css-variables
person Takit Isy    schedule 01.03.2018    source источник
comment
setProperty должен создать свойство, если оно не существует. Что, кажется, имеет место   -  person Greggz    schedule 01.03.2018
comment
приятно видеть, что вы рассматриваете их из вашего последнего вопроса, к сожалению, я опоздал :) у вас уже есть ответ;)   -  person Temani Afif    schedule 01.03.2018
comment
В любом случае, @TemaniAfif, это твоя вина, если я пришел с другим вопросом (шучу :)). Я еще раз благодарю вас за ваш ответ на мой другой вопрос, познакомив меня с переменными CSS, это действительно того стоит.   -  person Takit Isy    schedule 01.03.2018
comment
добро пожаловать ;) я сделал это со всеми :) я добавляю новые функции, а затем начинают сыпаться вопросы, что хорошо для всех, так как эти ресурсы будут полезны для будущих посетителей ;)   -  person Temani Afif    schedule 01.03.2018

Ответы (3)


arrow_upward
9
arrow_downward

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>

person BoltClock    schedule 01.03.2018
comment
Спасибо BoltClock, это была моя проблема. Я проверил версию jQuery в своем приложении, и это была 3.1.1… - person Takit Isy; 01.03.2018
comment
@TemaniAfif: Если бы фрагмент был актуальным, мой код работал бы, и я, возможно, сам заметил, в чем проблема! Так что да, было бы неплохо обновить его. :) - person Takit Isy; 01.03.2018

arrow_upward
1
arrow_downward

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

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

Итак, вот моя попытка реализовать простое расширение, которое проверяет, является ли изменяемое свойство настраиваемым свойством или нет (проверив, что оно начинается с двух дефисов). Если это так, пользовательское свойство модифицируется с помощью простого 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>

person Nisarg    schedule 03.03.2018

arrow_upward
0
arrow_downward

Вот моя версия с живой демо -

// массив с цветами

var colConfig = [
  "default-bg",
  "hoverbg",
  "activebg",
  "maintxt",
  "subtxt",
  "listtxt"
];

let col_1 = ["#ffffff", "#f5f5f5", "#0065ff",'rgba(20, 20, 200, 1)', 'rgba(20, 20, 20, 1)', 'rgba(100, 100, 100, 0.5)'];
let col_2 = ["#000000", "#5f5f5f", "#6500ff", "#1f1f1f", "#f1f1f1", "#000088"];

$("#default").click(function () {
  changeTh(col_1);
});

$("#new").click(function () {
  changeTh(col_2);
});

function changeTh(col) {
  for (let tag in colConfig) { 
    $(":root").css("--" + colConfig[tag], col[tag]);
  }
}
person B L Λ C K    schedule 19.05.2020