Чтобы прочесть данную статью, нужно знать работу с HTML в JavaScript.
Пример 1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Работа с CSS в JavaScript</title> </head> <body> <div id="mtext"> Привет, мир! </div> <script> /* Присвоение переменной "txt" элемента с идентификатором "mtext" */ var txt = document.getElementById('mtext'); // Установка ширины в 150 пикселов txt.style.width = '150px'; // Установка красного цвета текста txt.style.color = 'red'; // Установка зелёного фона txt.style.backgroundColor = 'green'; // Центрирование текста txt.style.textAlign = 'center'; // Установка отступа в 10 пикселов txt.style.padding = '10px'; </script> </body> </html> |
Для установки CSS стиля элементу HTML в JavaScript нужно использовать конструкцию “el.style.svoistvo = znachenie”, где “el” – элемент HTML, “svoistvo” – свойство стиля, “znachenie” – значение свойства. Если название свойства стиля состоит из двух и более слов через дефис, то дефис не пишется, а второе и следующие слова начинаются с большой буквы.
Данный пример можно записать короче, применив конструкцию “with”:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Работа с CSS в JavaScript</title> </head> <body> <div id="mtext"> Привет, мир! </div> <script> /* Присвоение переменной "txt" элемента с идентификатором "mtext" */ var txt = document.getElementById('mtext'); with(txt.style) { // Установка ширины в 150 пикселов width = '150px'; // Установка красного цвета текста color = 'red'; // Установка зелёного фона backgroundColor = 'green'; // Центрирование текста textAlign = 'center'; // Установка отступа в 10 пикселов padding = '10px'; } </script> </body> </html> |
Пример 2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Работа с CSS в JavaScript</title> <style> div { width: 150px; text-align: center; padding: 10px; } .stext { color: red; background-color: green; } .ntext { color: green; background-color: red; } </style> </head> <body> <div id="mtext" class="stext"> Привет, мир! </div> <button id="mknopka"> Другой цвет </button> <script> /* Присвоение переменной "knopka" кнопки с идентификатором "mknopka" */ var knopka = document.getElementById('mknopka'); /* Назначение кнопке функции-обработчика события нажатия мышью */ knopka.addEventListener('click', function() { /* Присвоение переменной "txt" элемента с идентификатором "mtext" */ var txt = document.getElementById('mtext'); // Изменение CSS класса у элемента txt.className = 'ntext'; }); </script> </body> </html> |
Изначально текст красный и фон – зелёный. При нажатии на кнопку “Другой цвет” текст становится зелёным, а фон – красным.
В данном примере свойство “className” позволяет задать новый CSS класс HTML элементу.
Пример 3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Работа с CSS в JavaScript</title> <style> div { width: 150px; text-align: center; padding: 10px; } .krasnii { color: red; background-color: green; } .zelenii { color: green; background-color: red; } </style> </head> <body> <div id="mtext" class="krasnii"> Привет, мир! </div> <button id="mknopka1"> Красный текст </button> <button id="mknopka2"> Зелёный текст </button> <script> /* Присвоение переменной "txt" элемента с идентификатором "mtext" */ var txt = document.getElementById('mtext'); /* Присвоение переменной "knopka1" кнопки с идентификатором "mknopka1" */ var knopka1 = document.getElementById('mknopka1'); /* Назначение кнопке функции-обработчика события нажатия мышью */ knopka1.addEventListener('click', function() { /* Удаление у элемента "txt" CSS класса "zelenii" */ txt.classList.remove('zelenii'); /* Добавление элементу "txt" CSS класса "krasnii" */ txt.classList.add('krasnii'); }); /* Присвоение переменной "knopka2" кнопки с идентификатором "mknopka2" */ var knopka2 = document.getElementById('mknopka2'); /* Назначение кнопке функции-обработчика события нажатия мышью */ knopka2.addEventListener('click', function() { /* Удаление у элемента "txt" CSS класса "krasnii" */ txt.classList.remove('krasnii'); /* Добавление элементу "txt" CSS класса "zelenii" */ txt.classList.add('zelenii'); }); </script> </body> </html> |
При нажатии на кнопку “Красный текст” текст становится красным, а фон – зелёным. При нажатии на кнопку “Зелёный текст” текст становится зелёным, а фон – красным.
В данном примере для удаления CSS класса у HTML элемента используется конструкция “el.classList.remove(c)”, а для добавления CSS класса HTML элементу – “el.classList.add(c)”; где “el” – элемент, а “c” – класс.
