город: Тамбов
тел: +7 999 621 90 62
e-mail: moskwin68@mail.ru
( ! ) Deprecated: Функция get_the_author вызвана с аргументом, который <strong>считается устаревшим</strong> с версии 2.1.0. Альтернативы не предусмотрено. in /home/h117935/data/www/xn--90abjbolhs9b.xn--p1ai/wp-includes/functions.php on line 5011 Call Stack #TimeMemoryFunctionLocation 10.0001408184{main}( ).../index.php:0 20.0002409800require( '/home/h117935/data/www/xn--90abjbolhs9b.xn--p1ai/wp-blog-header.php' ).../index.php:17 30.347065013304require_once( '/home/h117935/data/www/xn--90abjbolhs9b.xn--p1ai/wp-includes/template-loader.php' ).../wp-blog-header.php:19 40.351665141576include( '/home/h117935/data/www/xn--90abjbolhs9b.xn--p1ai/wp-content/themes/sandbox/single.php' ).../template-loader.php:106 50.367966120232sandbox_post_class( ).../single.php:12 60.367966120664get_the_author( ).../functions.php:298 70.367966120664_deprecated_argument( ).../author-template.php:27 80.368066120984trigger_error ( ).../functions.php:5011 hentry p1 post publish author-%d0%b5%d0%b2%d0%b3%d0%b5%d0%bd%d0%b8%d0%b9-%d0%bc%d0%be%d1%81%d0%ba%d0%b2%d0%b8%d0%bd category-%d0%b1%d0%b5%d0%b7-%d1%80%d1%83%d0%b1%d1%80%d0%b8%d0%ba%d0%b8 untagged y2019 m04 d08 h01">

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

«Стилизуемый текст»

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

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;
}