Робота зі стилями

До стилів елемента можна звернутися через властивість style:


				p.style.color = 'red';

				h2.style.padding = '10px 20px 15px';

До стилів, які записуються через тире, можна звернутися через camelCase-варіант написання:


				p.style.backgroundColor = '#321204';

				p.style.borderRadius = '6px';

Є одне виключення: до стиля float можна звернутися через cssFloat (у перших версіях JS слово float було зарезервоване для внутрішніх потреб).


				p.style.cssFloat = 'right';

Зверніть увагу: стилі можна задавати лише одному, конкретному елементу. Щоб стилі застосувати до набору елементів - цей набір треба перебрати:


				// наступний код працювати не буде:

				document.getElementsByTagName('p').style.color = 'red';


				// потрібно перебрати всі елементи одним з наступних способів:

				var p = document.getElementsByTagName('p');

				for (var i=0; i < p.length; i++) {

				  p[i].style.color = 'red';

				}


				Array.prototype.forEach.call(document.getElementsByTagName('p'),

				  function(e){ e.style.color = 'red'; }

				);


				document.querySelectorAll('p').forEach(function(e){

				  e.style.color = 'red';

				});

Стилі записуються в теги інлайновим атрибутом:


				<p style="color: red;">test</p>

Щоб обнулити такий стиль - просто запишіть пусту строку:


				p.style.color = '';

				p.style.padding = '';

Щоб дізнатися який стиль застосовано до елемента з CSS-таблиць - скористайтесь функцією getComputedStyle:


				var p = document.querySelector('p');

				var css = getComputedStyle(p);

				console.log(css.paddingLeft);

				console.log(css.color);

				console.log(css.fontSize);

Якщо потрібно звернутися лише до одного стиля - можна оминути створення змінної:


				let h = parseInt(getComputedStyle(document.querySelector('.box')).height);

Звертайтесь до кожного елемента стиля окремо, а не до групових стилів:


				// невірно:

				.padding

				.font

				.border


				// вірно:

				.paddingLeft

				.fontFamily

				.borderRightWidth

				.borderBottomColor

Завдання:

Заголовок лекції зробіть зеленим кольором і підкресленим.
Кожній третій <p> задайте жовтий фон. Попередньому елементу добавте синю тінь, а наступному - червону.
Всім <p>, в яких є тег <strong>, задати font-size: 30px і line-height: 42px.
Для тегів <code> збільшити вертикальні паддінги в чотири рази, а горизонтальні - в 2 рази (взнати паддінги програмно).