css.in.ua
Підтримати

Наповнення JS розділу

Добридень, Пані та Панове, завдяки вам вдалося зібрати більше 19тис грн з необхідних 15тис на впровадження JS розділу.

JS розділ вже впроваджено - переходимо до його наповнення і почнемо бігти довгий марафон, адже JS має більше 1100 різноманітних методів, властивостей, подій і т.д., які необхідно описати.

Будемо працювати, і вдень, і вночі, щоб орієнтовно взимку закінчити наповнювати JS розділ!

Ви також можете допомогти нам в цьому. Долучайтеся до нашої спільноти в дискорді - ставайте її частиною і допомагайте нашому розвитку.

Також, підтримуйте нас матеріально.

Підтримати матеріально

JS властивість CSSStyleDeclaration.lineHeight

Загальний опис

element.style.lineHeight - це властивість, яка дозволяє налаштовувати висоту рядка тексту всередині елемента HTML. Вона визначає відстань між базовими лініями сусідніх рядків тексту, що впливає на інтерліньяж (міжрядковий інтервал).

Щоб використовувати element.style.lineHeight в JavaScript, спочатку потрібно отримати посилання на HTML-елемент. Це можна зробити за допомогою методів document.getElementById, document.querySelector або інших схожих методів. Після цього ви можете встановити значення властивості lineHeight для цього елемента.

Значення властивості lineHeight можуть бути наступних типів:

  • Числове значення (наприклад, 1.5): відносне значення, що буде множитися на розмір шрифту, щоб визначити висоту рядка.
  • Значення у відсотках (наприклад, 150%): висота рядка буде визначатися як відсоток від розміру шрифту.
  • Значення в одиницях виміру (наприклад, 20px, 1em): фіксоване значення висоти рядка.
  • Ключові слова (normal, inherit, initial): стандартні значення для властивості.

Приклад використання element.style.lineHeight:

// Отримуємо посилання на елемент
var paragraph = document.getElementById("myParagraph");

// Встановлюємо висоту рядка у 1.5 разів більше за розмір шрифту
paragraph.style.lineHeight = 1.5;

// Встановлюємо висоту рядка у 200% від розміру шрифту
paragraph.style.lineHeight = "200%";

// Встановлюємо фіксовану висоту рядка у 24 пікселі
paragraph.style.lineHeight = "24px";

// Встановлюємо висоту рядка за замовчуванням
paragraph.style.lineHeight = "normal";

При зміні висоти рядка з допомогою цієї властивості, ви можете керувати вертикальним розташуванням тексту, що особливо корисно для покращення читабельності або естетики текстових блоків на веб-сторінці. Наприклад, для абзаців тексту в статті або описів продуктів в інтернет-магазині, правильне налаштування міжрядкового інтервалу може значно покращити зручність для користувача.

Також важливо зазначити, що зміна значення lineHeight впливає на всі дочірні елементи всередині обраного елемента, тому варто враховувати цей момент при проектуванні макету сторінки.

Використання цієї властивості може бути дуже гнучким завдяки підтримці різних типів значень. Це дозволяє легко підлаштовувати текст під різні дизайни та вимоги. Наприклад, для заголовків може бути використана одна висота рядка, тоді як для основного тексту - інша. Завдяки цьому ваші веб-сторінки можуть мати більш професійний та привабливий вигляд, що сприяє кращому сприйняттю інформації користувачами.

Порада:

Значення lineHeight може успадковуватись від батьківських елементів, тому будьте уважні при його зміні на контейнерах, що містять інші текстові елементи. Це допоможе уникнути непередбачених змін у дизайні ваших текстових блоків. Використовуйте конкретні значення для дочірніх елементів, щоб контролювати їх зовнішній вигляд точніше.
Порада:

Використання числового значення для lineHeight дозволяє створювати універсальні стилі, які автоматично підлаштовуються під різні розміри шрифтів. Це особливо корисно для загальних стилів на сайті. Наприклад, element.style.lineHeight = 1.6; зробить ваш текст більш читабельним, автоматично множачи значення на поточний розмір шрифту.
Порада:

Задайте lineHeight через JavaScript для динамічної зміни інтервалів в залежності від користувацьких дій або стану сторінки. Наприклад, ви можете змінювати міжрядковий інтервал при натисканні кнопки для збільшення читабельності. 

document.getElementById("increaseLineHeight").addEventListener("click", function() {
  document.getElementById("content").style.lineHeight = "2";
});

Синтаксис

element.style.lineHeight

Значення

Return

Переглядачі

Переглядач

1

1

3

8

12
Переглядач

4.4

18

4

1
Переглядач

-

-

Приклади


Цей код створює просту веб-сторінку з текстовим абзацом і елементами управління, які дозволяють користувачу динамічно змінювати висоту рядка цього тексту. За допомогою введення значення і натискання кнопки "Застосувати", користувач може змінювати lineHeight, а кнопка "Скинути" повертає значення до стандартного.

Цей приклад демонструє, як можна динамічно змінювати висоту рядка тексту в елементі на основі введеного користувачем значення. Це корисно для додатків, які потребують налаштування стилів у реальному часі, наприклад, текстових редакторів або засобів для створення контенту.

const input = document.getElementById('lineHeightInput');
const textElement = document.getElementById('textElement');

input.addEventListener('input', function() {
    const lineHeight = input.value;
    textElement.style.lineHeight = lineHeight;
});

У цьому прикладі висота рядка тексту автоматично змінюється залежно від висоти вікна браузера. Це може бути корисно для забезпечення читабельності тексту на різних розмірах екрану, особливо для адаптивних веб-сторінок або додатків, що мають різноманітні режими перегляду.

window.addEventListener('resize', function() {
    const textElement = document.getElementById('textElement');
    const windowHeight = window.innerHeight;

    if (windowHeight < 500) {
        textElement.style.lineHeight = '1.2';
    } else {
        textElement.style.lineHeight = '1.8';
    }
});

Спільнота

Зв'язок