Как изменить стиль шрифта при клике?

Question

[moskwin68]

<button id="bold" type="button" onclick="fontStyle('headline', 'fontWeight', 'normal', 'bold')"><b>Ж</b></button>
<p id="headline" >Заголовок статьи</p>

function fontStyle(target, cssAttr, defaultValue, targetValue) {	
				//console.log(target, cssAttr, defaultValue, targetValue);
				if (document.getElementById(target).style.cssAttr != targetValue) { 
					document.getElementById(target).style.cssAttr = targetValue;
				} else { 
					document.getElementById(target).style.cssAttr = defaultValue; }
			}

Я думаю, что не происходит преобразование этого cssAttr в это fontWeight. Помогите исправить.

#headline {
  font-weight: normal;
}

Answer 1

[senior65]

Может лучше так?

#font1 {font-family:CustomFont}
#font2 {font-family:CustomFont2}

И в теле функции уже елементу присвоить стили с шрифтом.

function fontStyle(target, style) 
{	
 var element = document.getElementById(target);
 element.classList.add(style);
 }
fontStyle("headline", "font1");

Как то так

Comments

[moskwin68]

Спасибо, но как все же можно сделать подстановку аргумента функции на место cssAttr?

[senior65]

<button id="bold" type="button"
onclick="fontStyle('headline', 'fontWeight', 'normal', 'bold')"><b>Ж</b></button>
<p id="headline" >Заголовок статьи</p>

function fontStyle(target, cssAttr, defaultValue, targetValue) {	
       
  let computedStyle = getComputedStyle(document.getElementById(target));
  console.log(computedStyle[cssAttr]);
       
 if (computedStyle[cssAttr] != targetValue)
        { 
        
    document.getElementById(target).style[cssAttr] = targetValue;
        } else { 
      document.getElementById(target).style[cssAttr] = defaultValue; }
      }

Я думаю тебе это поможет

[moskwin68]

senior65, getComputed возвращает цифровые значения насыщенности шрифтов, а ожидал что вернется значение normal.

[senior65]

Ну вы можете уже вручную прописать условия.
Ведь normal = 400, bold = 700.
Если cssAttr = 400, значит ставить normal, надеюсь логика понятна

Answer 2

[Алексей Шашенков]

Дайте нужный класс, а в css опишите какой шрифт вам нужен. Так намного проще