Добавьте CSS, но сохраняйте встроенный стиль

Question

Что я делаю не так.

Нужно добавить CSS с JavaScript, но я должен сохранить все встроенные стили.

В этом случае, когда пользователь щелкает элемент h1, цвет встроенного стиля должен оставаться прежним и просто добавить новый стиль из javascript.

Вот скрипка: https://jsfiddle.net/59qfxwcu/

<h1 style="color: red;">Test</h1>
<h1 style="color: green;">Test</h1>

<script>
function some(){
    var element = document.querySelectorAll('h1');

      element.forEach(function(item){

        item.onclick = function(){
            var inlineCss = this.style;

                item.style.cssText = inlineCss + 'background: blue; font-size: 12px;';
          }

      });
}

some();

</script>

Answer 1

Вам необходимо использовать style.background и style.fontSize javascript свойства:

function some(el) {
  var element = document.querySelectorAll('h1');

  element.forEach(function(item) {

    item.onclick = function() {
      item.style.background = 'blue';  // Change the background of the element
      item.style.fontSize = '12px';    // Change the font-size of the element
    }

  });
}

some();

<h1 style="color: red;">Test</h1>
<h1 style="color: green;">Test</h1>