Установить стиль элемента HTML-формы в JavaScript

  1. Добавить стиль к элементу HTML в JavaScript
  2. Применение стиля к элементам с именем класса в JavaScript
  3. Применить стиль к тегам в JavaScript

Одним из вариантов использования настраиваемого стиля для элемента HTML во время выполнения является выполнение проверок в формах. Нам нужно будет выделить элемент красным цветом и отобразить проверочный текст, например Username field cannot be left empty. Существуют различные способы установки параметров стиля для элемента HTML во время выполнения с помощью JavaScript. Мы можем добавлять новые стили, а также изменять существующий стиль. Ниже приведены несколько способов, которыми мы можем установить стиль CSS для элемента HTML с помощью JavaScript.

Добавить стиль к элементу HTML в JavaScript

Мы можем изменить стиль элемента с помощью атрибута JavaScript .style. Перед этим нам нужно запросить HTML-элемент и установить атрибут .style. Существуют различные способы запроса HTML-элемента в JavaScript, которые перечислены ниже, но наиболее часто используется метод document.getElementById().

  • getElementById(): интерфейса документа в JavaScript используется для запроса элемента HTML на основе его идентификатора. Обычно при разработке веб-страницы разработчики присваивают HTML-элементам уникальный идентификатор. getElementById() возвращает элемент, идентификатор которого указан в параметрах функции getElementById(). Если есть больше элементов с тем же идентификатором, то возвращается первый элемент с указанным идентификатором.
  • getElementsByClassName(): Другой способ запросить элемент HTML - это присвоить ему имя класса. Это имена классов CSS, которые обычно используются для украшения элемента. Поскольку несколько элементов HTML могут иметь одинаковые имена классов CSS, функция возвращает массив элементов HTML. Мы можем изменить или добавить определенный стиль к элементу или ко всем элементам, возвращаемым функцией getElementsByClassName().
  • getElementsByName(): аналогично тому, как мы выбираем элемент HTML с его именем класса CSS, функция getElementsByName() использует атрибут name для фильтрации ожидаемого элемента HTML. В этом случае может быть несколько элементов HTML с одинаковыми именами. Следовательно, он возвращает массив элементов HTML с атрибутом name, таким же, как тот, который был передан в его параметрах.
  • getElementsByTagName(): используется в случаях, когда нам нужно выбрать определенные HTML-теги, такие как теги <div>, <p>, <li> и т. Д. Это позволяет удобно применить стиль или установить стилей для всех элементов <div> за один раз. Функция getElementsByTagName() возвращает массив элементов, имя тега которых передано в параметре функции. Может быть несколько тегов HTML, стили которых, возможно, потребуется изменить за один раз.
  • querySelector(): похож на основной метод получения элемента. Чтобы понять использование параметров, принимаемых этой функцией JavaScript, подумайте об использовании селекторов для запроса элементов HTML в CSS. Мы можем использовать комбинации имен тегов, такие как document.querySelector("div span") (для выбора всего диапазона внутри div), document.querySelector("#elementID") (для запроса элемента на основе его идентификатора. ), document.querySelector(".sample-css") (для запроса элементов с именем класса CSS sample-css) и т. Д. Он возвращает первый элемент, который удовлетворяет критериям, переданным в качестве параметра функции.
  • querySelectorAll: похож на querySelector() во всех аспектах, кроме возвращаемого типа. Вместо того, чтобы возвращать только первый элемент, удовлетворяющий критериям, как в функции querySelector(), функция querySelectorAll возвращает все элементы HTML, которые соответствуют условиям, указанным в параметрах метода. После выбора элемента HTML мы используем атрибут .style, за которым следует имя стиля, который мы хотим изменить или добавить. Например, в следующем коде мы пытаемся изменить цвет фона элемента с идентификатором username.
<div id="username">
    <label>User Name: </label>
    <input type="text" id="username" name="UserName">
</div>
window.onload = function () {
    document.getElementById("username").style.backgroundColor = "green";
}

Если у выбранного элемента HTML уже установлен атрибут стиля (например, цвет фона), то следующий код изменит его. А если у него нет атрибута стиля, то новый стиль добавляется во время выполнения кодом JavaScript.

Применение стиля к элементам с именем класса в JavaScript

Мы можем запросить элемент, используя имя класса с помощью функции JavaScript getElementsByClassName(). После выбора элемента (ов) мы можем добавить или изменить стиль элементов с помощью атрибута .style. Этот метод применяется, когда нам нужно иметь дополнительные атрибуты CSS в этом конкретном классе CSS элемента. Следующий код описывает использование.

<div id="username" class="blue-bg">
    <label>User Name: </label>
    <input type="text" id="username" name="UserName">
</div>
window.onload = function () {
    document.getElementsByClassName("blue-bg")[0].style.backgroundColor = "green";
}

Примечание: здесь функция getElementsByClassName("blue-bg") возвращает массив элементов. Следовательно, необходимо выбрать индекс элемента, к которому мы собираемся применить стили. Если атрибут стиля уже установлен каким-либо классом CSS или встроенным стилем, атрибут .style перезапишет его. Если он еще не установлен, он добавит новый атрибут для установки стиля целевого элемента HTML.

Применить стиль к тегам в JavaScript

В случае, если мы должны добавить стиль ко всему div или всему диапазону, тогда мы можем использовать функцию .getElementsByTagName(). Он запрашивает в DOM имена тегов. Он возвращает коллекцию элементов HTML, которые удовлетворяют имени тега, переданному в качестве параметра. После того, как функция вернула элементы HTML, мы можем применить атрибут стиля к этому элементу, используя его индекс. В следующем коде это уточняется.

<div id="output">Hello World!!</div>
<form name="LoginForm">
    <div id="username" class="blue-bg">
        <label>User Name: </label>
        <input type="text" id="username" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
    <div>
        <label>Description: </label>
        <textarea name="description"></textarea>
    </div>
    <div>
        <label>Occupation: </label>
        <select id="occupationSelect" autofocus>
            <option>Student</option>
            <option>Teacher</option>
            <option>Engineer</option>
        </select>
    </div>
</form>
window.onload = function () {
    document.getElementsByTagName("div")[0].style.backgroundColor = "green";
}

При выполнении вышеуказанного кода первый div (<div id="output">Hello World!!</div>) получает зеленый цвет фона. Обратите внимание, что поскольку мы нацелены на первый div, мы используем индекс как 0 (document.getElementsByTagName() div 0). Точно так же мы можем назначить атрибуты стиля тегу body с помощью document.getElementsByTagName("body")[0].style.backgroundColor = "green". Поскольку в документе HTML разрешен только один тег body, мы можем напрямую запросить элемент body и применить к нему атрибуты стиля с помощью атрибута .body интерфейса document. Следовательно, код будет иметь вид document.body.style.backgroundColor = "green".