How to change the background colors of all <em> elements-CodePudding

I am trying to change the background colors of all italized text, instead of using a span on every single word through the paragraph. It says <em> next to the italized text. I have tried

$(".em").css({
    "background-color":"#d9f9f9",
});

or/and tried this:

var elem=document.getElementByTagName(em)[1];
elem.style.backgroundColor='#d9f9f9';

CodePudding user response：

See querySelectorAll:

Notices this method return an array, so we should loop it:

var emList = document.querySelectorAll('em');

[].forEach.call(emList , function(em) {
  // do whatever
  em.style.color = "red";
});

CodePudding user response：

Your first suggestion says ".em" where it should say "em". Your seconds suggestion says em where it should say "em".

CodePudding user response：

You could try the following:

const italics = document.querySelectorAll('em');

italics.forEach(italic => {
  italic.style.backgroundColor = '#d9f9f9';
});