Изменение свойства класса css с помощью js

Question

Есть css класс с заранее забитым цветом (например синий). Мне нужно чтобы пользователь (программист, т к это либа) смог менять этот цвет при инициализации js объекта. И менять так, чтобы при последующем добавлении элемента html с таким же классом, сразу воспринимался пользовательский цвет.

Тоже самое с jQuery (отличия только в том, что если я динамически добавлю еще элемент, то мне его нужно будет так же перекрасить):

$("btn1").click(function() {
  $(".container").append(`<div class="color">asd<\/div>`);
})

$("btn2").click(function() {
  // как поменять дефолтный blue 
  // на любой другой (предполагается что цвет передастся а качестве аргумента в конструктор)
})

.color:hover {
  color: blue;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn1">add</button><button id="btn2">change color</button>
<div class="container">
  <div class="color">asd</div>
  <div class="color">asd</div>
  <div class="color">asd</div>
  <div class="color">asd</div>
  <div>
    <div class="color">asd</div>
    <div class="color" or>asd</div>
    <div class="color">asd</div>
  </div>
</div>

Answer 1

Вариант 1:

$("#btn1").click(function() {
  $(".container").append(`<div class="color">asd<\/div>`);
})

$("#btn2").click(function() {
  color = prompt("Введите цвет");
  addCssRule(".color:hover", {
  color: color,
});
})

function addCssRule(rule, css) {
  css = JSON.stringify(css).replace(/"/g, "").replace(/,/g, ";");
  $("<style>").prop("type", "text/css").html(rule + css).appendTo("head");
}

.color:hover {
  color: blue;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn1">add</button><button id="btn2">change color</button>
<div class="container">
  <div class="color">asd</div>
  <div class="color">asd</div>
  <div class="color">asd</div>
  <div class="color">asd</div>
  <div>
    <div class="color">asd</div>
    <div class="color" or>asd</div>
    <div class="color">asd</div>
  </div>
</div>

Вариант 2:

$("#btn1").click(function() {
  $(".container").append(`<div class="color">asd<\/div>`);
})

$("#btn2").click(function() {
  color = prompt("Введите цвет");
  addStyles('.color:hover', {
    color: color
});
})




function addStyle(selector, rulename, value) {
    var stylesheet = getAppStylesheet();
    var cssRules = stylesheet.cssRules || stylesheet.rules;
    var rule = stylesheet.insertRule(selector + ' { ' + rulename + ':' + value + ';}', cssRules.length);
}

function clearStyle(selector, rulename) {
    var stylesheet = getAppStylesheet();
    var cssRules = stylesheet.cssRules || stylesheet.rules;
    for (var i=0; i<cssRules.length; i++) {
        var rule = cssRules[i];
        if (rule.selectorText == selector && rule.style[0] == rulename) {
            stylesheet.deleteRule(i);
            break;
        }
    }       
}

function addStyles(selector, rules) {
    var stylesheet = getAppStylesheet();
    var cssRules = stylesheet.cssRules || stylesheet.rules;
    for (var prop in rules) {
        addStyle(selector, prop, rules[prop]);
    }
}

function getAppStylesheet() {
    var stylesheet = document.getElementById('my-styles');
    if (!stylesheet) {
        stylesheet = $('<style id="my-styles">').appendTo('head')[0];
    }
    stylesheet = stylesheet.sheet;
    return stylesheet;
}

.color:hover {
  color: blue;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn1">add</button><button id="btn2">change color</button>
<div class="container">
  <div class="color">asd</div>
  <div class="color">asd</div>
  <div class="color">asd</div>
  <div class="color">asd</div>
  <div>
    <div class="color">asd</div>
    <div class="color" or>asd</div>
    <div class="color">asd</div>
  </div>
</div>

БЛОГ НА HUSL

Изменение свойства класса css с помощью js

Ответы (1 шт):