Изменение стилей CSS с помощью JavaScript

Изменение стиля CSS с помощью javascript

С помощью javascript мы можем изменить стиль css для части документа.

Вот пример:

Таким же образом мы с вами можем изменить и другой стиль элемента - это цвет

Код для этого прописывается внутри html документа следубщим образом:

<button type = "button"
onclick = "document.getElementById('demo_css').style.fontSize = '35px'">Нажми, чтобы посмотреть</button>

То, что отметил в коде, можно изменить на color ='red' и получим пример изменения цвета текста.  

С помощью javascript мы можем скрыть какую - либо часть текста, или страницы. Для этого мы просто заменим выделенную часть кода на display='none'

И наоборот. JavaScript может отобразить скрытые элементы

В данном случае мы изменили в коде только значение none, на block В абзаце, который мы создали с новым элементом id дописали стиль. Вот так:
<div id="demo_hidden" style="display:none">

Переключение картинок javascript

Делаем смену картинки по клику на кнопку.

Для этого нам нужен такой html код.

<h1>Что может делать JavaScript?</h1>
<p>Можем изменить картинку по клику на кнопку..</p>
<p>В этом случае JavaScript изменит атрибут
SRC (источника) изображения.</p>
<button onclick="document.getElementById('myImage')
.src='pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage')
.src='pic_bulboff.gif'">Turn off the light</button>

Здесь вы можете посмотреть как можно изменять картинки при наведении курсора с помощью только css!

Что может делать JavaScript?

Можем изменить картинку по клику на кнопку..

В этом случае JavaScript изменит атрибут
SRC (источника) изображения.