javascript - 添加 CSS 但保留内联样式

Question

我做错了什么。

需要使用 JavaScript 添加 CSS，但我必须保留所有内联样式。

在这种情况下，当用户单击 h1 元素时，内联样式的颜色需要保持不变，只需从 JavaScript 添加新样式。

这是 fiddle :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>