Изменение стиля текста кнопками

“Стилизуемый текст”

При нажатии кнопки меняется соответствующий стиль текста.

HTML

<button id="bold" type="button" onclick="fontStyle(this, 'headline', 'fontWeight', 'normal', '700')"><b>Ж</b></button>
<button id="italic" type="button" onclick="fontStyle(this, 'headline', 'fontStyle', 'normal', 'italic')"><i>Н</i></button>
<button id="underline" type="button"  onclick="fontStyle(this, 'headline', 'textDecoration', 'none', 'underline')"><font style="text-decoration:underline;">П</font></button>
<p id="headline" >"Стилизуемый текст"</p>

JavaScript

function fontStyle(status, target, cssAttr, defaultValue, targetValue) {
 let computedStyle = getComputedStyle(document.getElementById(target));
 if (computedStyle[cssAttr] != targetValue) { 
  document.getElementById(target).style[cssAttr] = targetValue;
  status.style.backgroundColor = '#ccc';
} else {
  document.getElementById(target).style[cssAttr] = defaultValue;
  status.style.backgroundColor = '#f1f1f1';					
 }
}

CSS

#bold, #italic, #underline {
 font-size: 14px;
 border: 1px solid #ccc;
 border-radius: 2px;
 width: 28px;
 height: 28px;
}
#headline {
 font-size: 30px;
 font-weight: normal;
 text-align: center;
 text-indent: 0;
}

Темы