Javascript как изменить стиль текста

Изменение стилей через JavaScript

Изменение стилей через JavaScript

Как правило, начинающие изучать веб-разработку люди уже знают, как легко можно поменять внешний вид элемента с помощью CSS стилей. Но менять стили можно и через JavaScript. Когда же наступает необходимость это делать через JavaScript? Первое, что приходит в голову — это для создании анимаций.

Изменение стилей через CSS

У нас есть черный заголовок в розовой рамке. За внешний вида заголовка отвечают CSS стили.


//HTML код

<div class="container">

    <h1 id="heading">Польза ананасов</h1>

</div>

//CSS код

.container {

    width: 400px;

    border: 10px solid plum;

    margin: 20px auto;

}

#heading {

    font-size: 24px;

    font-weight: 700;

    color: black;

    font-family: 'Arial Narrow Bold', sans-serif;

    text-align: center;

}

Изменение стилей через JavaScript.

Если мы хотим изменит цвет у заголовка с черного на фиолетовый, то идем в CSS код и вручную заменяем значение у свойства color.


#heading {

    color: violet;

}

Заголовок стал фиолетовый.

Изменение стилей через JavaScript.

Изменение стилей через JavaScript

Но мы хотим большего взаимодействия с пользователем. Чтобы цвет заголовка менялся вследствии наступления какого-нибудь события (клика мыши). Изменим наш заголовок на фиолетовый через JavaScript. Действуем уже по отработанному алгоритму:

  1. Получить элемент
  2. Обратится к свойству элемента
  3. Установит новое значение

Найдем заголовок по названию селектора и поместим его в переменную headingElement для дальнейших манипуляций. Затем получим доступ к его атрибуту style и укажем нужное нам свойство color, которое собираемся изменить. То есть, мы обращаемся к свойству color у стиля того элемента, который лежит а переменной headingElement и устанавливаем ему новое значение — фиолетовый цвет. В записи мы используем две точки, потому что у нас два объекта. Первый объект сам элемент h1, а второй объект — style, в свойствах которого хранятся все стили элемента h1.


// получение элемента по селектору

let headingElement = document.querySelector('#heading');

// обращение к интересующему свойству и присвоение нового цвета

headingElement.style.color = 'violet';

Цвет заголовка опять поменялся на фиолетовый.

Изменение стилей через JavaScript.

Названия свойств

Теперь попробуем изменить цвет рамки у заголовка. Действуем по аналогии с заменой цвета. Получаем элемент container, у которого будем менять цвет свойства border-color с розового на черный.


let containerElement = document.querySelector('.container');
containerElement.style.border-color = 'black'; // нельзя писать border-color

Упс! Ничего не произошло и выскочило сообщение об ошибке, а цвет у рамки не поменялся. Почему не сработало? Ведь в обычном CSS мы бы так и написали border-color: black. Все дело в дефисе, имена свойств в JavaScript не могут содержать дефис. Поэтому все CSS свойства в названиях которых есть дефис, нужно преобразовать в другой синтаксис. Для этого мы убираем дефис и пишем первую букву второго слова, заглавной. Такой стиль написания называется camelCase (верблюжий регистр), напоминающий горбы верблюда.


let containerElement = document.querySelector('.container');

containerElement.style.borderColor = "black"; // так правильно borderСolor

Теперь наш обновленный JavaScript сработал. Рамка у заголовка окрасилась в черный цвет.

Изменение стилей через JavaScript.

Заключение

Зачем вообще нужно изменять элементы на странице с помощью JavaScript? Не проще ли сразу создать HTML страницу с необходимым CSSкодом? Все дело в том, что JavaScript позволяет реагировать на события, производимые пользователем и менять CSS свойства прямо на ходу. Во взаимодействии с пользователем и заключается вся сила языка JavaScript. Например вы можете создавать формы и проверять, что туда вводит пользователь. Просто создавать HTML страницы и стилизовать их согласно макету заказчика, недостаточно в современной веб-разработке. Вы можете возразить, что для этого есть другие специалисты — JavaScript программисты. Однако в реальном мире, заказчики предпочитают выбирать исполнителей с опцией «все включено», чтобы цепочка исполнителей была, как можно короче. Поэтому изучайте JavaScript на моем видеокурсе, если вы хотите стать востребованным фронтенд-разработчиком.

  • Создано 05.04.2021 10:14:06


  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

В этой статье мы рассмотрим различные методы для работы с классами и стилями элемента. Познакомимся со свойствами classList и style, и примерами их использования для управления соответственно классами и стилями элементов на странице.

Управление классом (классами) элемента

Первый способ взаимодействия с классами элементов сводится к использованию DOM-свойства className. Данное свойство является отражением атрибута class в DOM. DOM-свойство className не было названо class из-за того, что раньше в JavaScript зарезервированные слова нельзя было использовать в качестве названия свойств объектов. Если вы не знаете, что такое DOM-свойства и чем они отличаются от атрибутов, то прочитать про это можете в этой статье.

Пример, в котором выполним различные операции над классом элемента используя DOM-свойство className:

<p id="alert">...</p>

<script>
var elem = document.querySelector('#alert');
// добавим класс к элементу
elem.className = 'alert'; // "alert"
// изменим класс у элемента
elem.className = 'alert-warning'; // "alert-warning"
// получим значение класса и сохраним его в className
var classElem = elem.className; // "alert-warning"
// удалим класс у элемента
elem.className = ""; // ""
</script>

Второй способ выполнить операции, связанные с классом элемента – это использовать методы для управления атрибутами.

Пример, в котором выполним действия как вышеприведённом коде, но с использованием методов для управления атрибутами:

<p id="alert">...</p>

<script>
var elem = document.querySelector('#alert');
// добавим класс к элементу
elem.setAttribute('class', 'alert');
// изменим класс у элемента
elem.setAttribute('class', 'alert-warning');
// получим значение класса и сохраним его в className
var classElem = elem.getAttribute('class'); // "alert-warning"
// удалим класс у элемента
elem.removeAttribute('class');
</script>

DOM-свойство className и атрибут class всегда синхронизуются между собой, это значит, что при изменении одного меняется и другое.

Но у элемента может быть не один класс, а несколько. В этом случае работать с ними как со строкой не очень удобно.

Например, определить наличие какого-то одного определённого класса у элемента, используя вышеприведённые способы уже нельзя осуществить так просто. Это потребует написание определённого кода.

Пример, в котором проверим наличие у элемента класса content__show:

<div id="content" class="content content__show">...</div>

<script>
  var elem = document.querySelector('#content');
  if ((' ' + elem.className + ' ').indexOf(' content__show ') > -1) {
    // у элемента есть класс content__show
  } else {
    // у элемента класса content__show нет
  }
</script>

Но кроме этой ситуации, встречаются и другие. Например, когда нужно добавить какой-то один определённый класс к элементу, или удалить его. Чтобы эти действия и другие производить очень просто у элемента есть специальное для этих случаев DOM-свойство classList.

Свойство classList

Свойство classList представляет собой специальный объект (DOMTokenList), который содержит методы для выполнения различных операций над классами элемента.

Методы classList:

  • .add( className1[,className2,...] ) — добавляет один или несколько указанных классов к элементу. Если у элемента уже есть данный класс, то он к нему добавлен не будет.
  • .remove( className1[,className2,... ] ) — удаляет один или несколько указанных классов у элемента. Если у элемента нет класса, который вы хотите удалить, то никаких действий произведено не будет.
  • .contains( className ) – проверяет наличие класса у элемента; в качестве ответа возвращает true или false.
  • .toggle( className [,flag] ) — переключает указанное имя класса у элемента, т.е. если у элемента есть данный класс, то убирает его; в противном случае добавляет. Второй параметр (flag) необязательный. По умолчанию он имеет значение undefined. Если ему установить значение true или false, то он будет работать как метод add или remove, т.е. либо добавлять класс к элементу, либо удалять его у него.

Пример, в котором показано как можно выполнять различные действия, связанные с классами элемента с использованием методов classList:

// получим элемент c id="sidebar"
const sideBar = document.querySelector('#sidebar');

// переключим класс hidden-xs у элемента, т.е. если он есть он у элемента, то удалим его; а если данного класса нет, то добавим его к нему
sideBar.classList.toogle('hidden-xs');
// добавим три дополнительных класса
sideBar.classList.add('col-xs-6', 'col-sm-4', 'col-md-3');
// удалим класс hidden-xs
sideBar.classList.remove('hidden-xs');
// проверим есть ли класс hidden-lg у элемента и если есть, то добавим к нему ещё один hidden-md
if (sideBar.classList.contains('hidden-lg')) {
  sideBar.classList.add('hidden-md');
}

Объект classList является псевдомассивом, т.е. его можно перебрать как массив.

Пример, в котором переберём все классы classList:

<div class="content col-12 col-sm-8 col-md-6">...</div>

<script>
var content = document.querySelector('.content');

// Вариант №1. С помощью цикла for
// classList.length - количество классов у элемента
// отсчёт классов в classList ведётся с 0
for (var i = 0, length = content.classList.length; i < length; i++) {
  // i - индекс класса в classList
  // выведем класс в консоль
  console.log(content.classList[i]);
  // или так (с помощью метода item)
  console.log(content.classList.item(i));  
}
// если мы хотим получить класс по его индексу, а указали в качестве значения индекса число, которое больше, чем (количества элементов - 1) в classList (т.к. отсчет ведётся с 0), то в этом случае получим в качестве результата undefined
console.log(content.classList[7]); // undefined

// Вариант №2. С помощью цикла for..of
for (let className of content.classList) {
  // выведем класс в консоль
  console.log(className);
}
</script>

Свойство classList поддерживается всеми современными браузерами. Если нужна поддержка совсем старых браузеров (например, Internet Explorer 8, 9), то в этом случае можно воспользоваться каким-нибудь полифиллом.

Стили элемента

В DOM у каждого элемента есть свойство style, с помощью которого мы можем управлять его стилями. Значение данного свойства — это объект, который доступен только для чтения. Установка стилей элементу в этом случае осуществляется посредством добавления к нему соответствующих свойств.

Пример, как можно к элементу добавить стили через DOM-свойство style:

<div class="square">Квадрат</div>

<script>
const square = document.querySelector('.square');
square.style.width = '170px';
square.style.height = '170px';
square.style.backgroundColor = 'green';
</script>

Имена свойств объекта style обычно совпадают с названиями CSS-свойств. Исключение составляют только те CSS-свойства, в которых используется дефис. Например, background-color. В этом случае дефис и следующая за ним буква заменяется на прописную. Например, CSS-свойство background-color для объекта style будет указывать как backgroundColor. А, например, CSS-свойство с браузерным префиксом -webkit-border-radius — как WebkitBorderRadius.

Удаление стилей

Например, установим body некоторый цвет фона:

document.body.style.backgroundColor = '#eee';

Если теперь данный стиль нужно убрать, то чтобы это выполнить мы должны просто присвоить ему пустую строку:

document.body.style.backgroundColor = '';

Примеры использования DOM-свойства style для установки стилей элементам.

<p id="introtext" style="font-weigth: bold;">...</p>
<p>...</p>
<p>...</p>

<script>
// установим элементу с id = "introtext" с использованием style красный цвет текста 
document.querySelector('#introtext').style.color = 'red';

// установим всем элементам p на странице с использованием style зелёный цвет текста
var paragraphs = document.querySelectorAll("p");
for (var i = 0, length = paragraphs.length; i < length; i++) { 
  paragraphs[i].style.backgroundColor = 'green';
}

// выведем в консоль все CSS свойства элемента с идентификатором "introtext"
var styleElem = document.querySelector('#introtext').style;
for (var i = 0, length = styleElem.length; i < length; i++) { 
  console.log(styleElem[i]);
}
</script>

Свойство cssText

Кроме индивидуального установления стилей элементу мы можем установить их сразу с помощью специального свойства style.cssText. Осуществляется это посредством присваивания этому свойству строки, состоящей из набора стилей, разделённых между собой с помощью точки с запятой. Т.е. выполняется это аналогично тому, как мы устанавливаем стили в HTML-атрибуте style.

Пример, в котором установим стили "font-size:40px; color:blue;" элементам с классом intro:

<p class="intro">...</p>

<script>
  //получим все элементы с классом intro
  const introList = document.querySelectorAll('.intro');

  //установим "font-size:40px; color:blue;" всем элементам в introList
  for (let i = 0, length = introList.length; i < length; i++) {
    introList[i].style.cssText = 'font-size:40px; color:blue;';
  }
</script>

При установке стилей с помощью свойства style.cssText нужно быть осторожным. Эти связано с тем, что при установке это свойство удаляет все стили, которые есть у элемента. Т.е. те, которые мы установили ему с помощью атрибута style и в соответствующем ему DOM-свойстве.

Выполнить операцию, аналогичную той которую выполняет свойство style.cssText, можно ещё через метод setAttribute.

Например:

<p class="info">...</p>

<script>
//получим первый элемент с классом info
const info = document.querySelector('.info');

//установим ему стиль "margin: 10px; padding: 10px; border: 1px solid green;"
info.setAttribute('style', 'margin: 10px; padding: 10px; border: 1px solid green;');
</script>

Задания

1. Написать скрипт, используя classList, для установления элементу с классом text трех классов: size-40, color-red и bg-yellow:

<!-- СSS -->
<style> 
  .size-40 {
    font-size: 40px;
  }
  .color-red {
    color: red;
  }
  .bg-yellow {
    background: yellow;
  }
</style>

<!-- HTML -->
<p class="text">Некоторый текст...</p>

2. Написать код для установления стиля "width: 180px; height: 180px;" всем элементам на странице с классом, начинающимся со слов block-.

In my previous article, we looked at different ways to get style information from an HTML element using JavaScript. Today, you’ll learn how to apply CSS styles to HTML elements with JavaScript.

Let us say we have the following <div> element:

<div class="pizza">Hot, spicy, pizza 🍕</div>

Now, we want to change its text, background colors, and font style CSS properties using JavaScript. What should we do? There are multiple options available in JavaScript.

Inline Styles

The easiest and straightforward way to change the CSS styles of an element with JavaScript is by using the DOM style property.

All you need to do is fetch the element from DOM and change its inline styles:

const pizza = document.querySelector('.pizza')

// change the text color to white
pizza.style.color = 'white'

// set background color to blue
pizza.style.backgroundColor = 'blue'

// change font style to italic
pizza.style.fontStyle = 'italic'

The style property uses the camel-case naming conventions for CSS properties and applies styles inline to the element:

<div class="pizza" style="color: white; background-color: blue; font-style: italic;">Hot, spicy, pizza 🍕</div>

Global Styles

Another way is to create a <style> element, inject your CSS properties, and append it to the DOM. This option is beneficial if you want to apply styles to multiple HTML elements instead of just one.

First, let us create a <style> element:

const style = document.createElement('style')

Next, add the CSS styles to the above tag using innerHTML:

style.innerHTML = `
    .pizza {
        color: white;
        background-color: blue;
        font-style: italic;
    }
`

Finally, append the style element to the DOM. To do this, get the <head> tag using document.head, and then call the appendChild() method on it to append the style element:

document.head.appendChild(style)

Here is the complete JavaScript code snippet:

// create an element
const style = document.createElement('style')

// add CSS styles
style.innerHTML = `
    .pizza {
        color: white;
        background-color: blue;
        font-style: italic;
    }
`

// append to DOM
document.head.appendChild(style)

CSS Object Model (CSSOM) InsertRule()

According to MDN:

The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify [the] CSS style dynamically.

The CSSStyleSheet.insertRule() method inserts a new CSS rule to a stylesheet. Here is how you can use this method to add styles to the above HTML element:

// create an new style
const style = document.createElement('style')

// append to DOM
document.head.appendChild(style)

// insert CSS Rule
style.sheet.insertRule(`
    .pizza {
        color: white;
        background-color: blue;
        font-style: italic;
    }
`)

It is not really required to create a new <style> element. You can use existing <style> elements as well as external stylesheets to add CSS rules using insertRule().

The insertRule() method works in all modern browsers, including Internet Explorer 9 and higher.

Constructable Stylesheets

Constructable Stylesheets is a modern way of creating and distributing reusable styles when working with the Shadow DOM.

Here is an example that creates a Constructable Stylesheets and appends it to the Shadow DOM:

// create a new shared stylesheet
const sheet = new CSSStyleSheet()

// add CSS styles
sheet.replaceSync(`
    .pizza {
        color: white;
        background-color: blue;
        font-style: italic;
    }
`)

// apply the stylesheet to a document
document.adoptedStyleSheets = [sheet]

Conclusion

In this article, we looked at four ways to add CSS styles to an HTML element in JavaScript.

So, which method should you use? It depends on what you want to achieve by dynamically changing the CSS.

If you only want to modify CSS styles for a single element, it is better to use the style property. This property changes the inline styles for a specific HTML element without affecting global styles.

If you want to apply a style to a set of HTML elements, create a new <style> tag with the necessary CSS properties and append it to the document.

Read Next: How to add multiple CSS styles using JavaScript

✌️ Like this article? Follow me on
Twitter
and LinkedIn.
You can also subscribe to
RSS Feed.

На чтение 10 мин. Опубликовано 22.02.2021

Javascript не только предназначен для создания функциональности на странице. Благодаря наличию Documnt Object Model (DOM) и Browser Object Model (BOM), язык может взаимодействовать с разметкой, стилями и браузером. DOM является древовидной структурой, основой которой является объект Window.

Элементы HTML разметки представляются в DOM как набор объектов в определенной иерархии. Каждый HTML элемент представлен в виде объекта со своими свойствами и методами. Поэтому, посредством JS, можно обращаться к элементам разметки и манипулировать с их свойствами.

Свойства HTML элементов выражены в CSS стилях. Однако JS не может изменять стили, заключенные в теге <style>, а также во внешних файлах CSS. Когда посредством JS изменяется или добавляется новое свойство CSS для элемента, то интерпретатор формирует его как атрибут «style». Это можно наглядно увидеть в инструментах разработчика Chrome или в Firebug браузера Firefox.

Иерархия DOM

Объекты в иерархии DOM распределены в следующей последовательности:

  1. Window;
  2. Document;
  3. Element;

Теперь подробнее о каждом из них:

  1. Window. Это главный объект всего браузера. Он содержит свойства-объекты управления окном и элементами разметки. Одним из его свойств-объектов управления экраном браузера является Document, который содержит в себе свойство-объект Element.
  2. Document. Управляет всеми элементами разметки он содержит в себе необходимый набор свойств для обращения к элементам HTML, а также свойства для управления окном.
  3. Element. Содержит свойства и методы, которые позволяют манипулировать элементами и стилями.

Поиск нужного элемента

Прежде чем присвоить элементу какой-либо стиль, нужно сначала обратиться к объекту этого элемента, через объект Document. Выглядит это следующим образом: Document.Element(метод обращения к элементу).style.property = value

Подробнее об этой конструкции:

  1. Document — обращаемся к объекту страницы;
  2. Element — полученный HTML-элемент в ходе вызова одного из методов Document.
  3. style — объект, содержащий свойства CSS объекта Element.
  4. property — CSS свойство, а также свойство объекта style.
  5. value — значение CSS свойства, которое может быть как числовым, так и строковым.

Аналогичным способом мы можем прочитать значение любого CSS свойства. Однако это возможно только в том случае, если у элемента стоит атрибут style. Рассмотрим на примере обращение к элементу посредством метода «getElementById(name)»

Пример:

<p id = «paragraph» class = «parag1»>Параграф<p>

var p = document.getElementById(«paragraph»); // сохранили в переменную элемент с id = paragraph.
p.style.fontSize = «3em»; // изменим стиль параграфа, увеличив его шрифт до 3em

Если открыть инструменты разработчика в браузере, параграф будет с атрибутом style: <p id = «paragraph» class = «parag1» style = «font-size: 3em»>Параграф<p>

Методы поиска элемента

Есть несколько методов объекта document для поиска определенного элемента по классу, по айди или имени тега:

  • getElementById(id) — поиск элемента по id, возвращается один элемент с соответствующим айди;
  • getElementsByClassName(class) — возвращает список элементов под указанным классом, обращение к любому из них осуществляется по индексу [index];
  • getElementsByTagName(tag) — метод аналогичен предыдущему, только поиск осуществляется по имени тега;
  • getElementsByName(name) — возвращает список элементов с указанным именем в атрибуте;
  • querySelector(selector) — возвращает первый элемент с указанным в параметре селектором из тега style или внешнего файла CSS;
  • querySelectorAll(selector) — метод аналогичен предыдущему, но возвращает не один элемент, а их список;
  • body — обращение к тегу body;
  • forms — обращение к формам, сохраняется список имеющихся форм, к отдельной можно обратиться по индексу;
  • images — возвращает все имеющиеся изображения на страницы в теге img, обращение к отдельному осуществляется по индексу.

Пример:

<p id = «paragraph» class = «parag1»>Параграф<p>
<form>
<input type = «text»>
<input type = «submit»>
</form>
<img src = «cat.jpg»>

// Получаем объекты этих элементов
var p = document.getElementById(«paragraph»); // получаем параграф по айди
var f = document.forms; // получили список форм, состоящий из одной
var i = document.images; // получение всех изображений

//Добавим полученным элементам стили
p.style.backgroundColor = «red»;
f.style.borderRadius = «20px»;
i.style.float = «left»;
i.style.margin = «50px»;

Отличия имен свойств в CSS и JavaScript

В CSS имена свойств пишутся через дефис, к примеру: font-size, background-image, border-width и другие. Сейчас рассматриваются именно те свойства, которые пишутся через дефис. В JavaScript свойства пишутся слитно, но с большой буквы: fontSize, backgroundImage, borderWidth. Данное правило не относится к свойствам CSS, состоящим из одного слова: width, position, margun и другие указываются в JavaScript с тем-же синтаксисом.

Как изменить свойства элемента через тег style или внешний файл

Представим, что у нас есть внешний CSS файл со свойствами для тегов определенного класса:

.paragraph{
font-size: 20px;
background-color: yellow;
border: 1px solid black;
}

Теперь в том-же файле определим стиль, для несуществующего элемента:

.chageParagraph{
font-size: 3em;
}

В HTML у нас есть элемент для которого были написаны эти стили:

<p class = «paragraph»>Параграф<p>

Чтобы определить параграфу стили из внешнего файла, нужно сменить имя его класса. Мы определили стили для несуществующего класса. Его мы и поставим нашему параграфу:

var p = document.getElementById(«paragraph»); // Сохранили объект параграфа в переменную
p.class = «changeParagraph»; // Замена имени класса параграфа

Теперь наш параграф получил новый класс «chageParagraph». Как видно для данного класса определены лишь стили по увеличению размера шрифта. Соответственно, фоновый цвет стал по умолчанию, и рамка исчезла. Вернуть обратно прежний стиль можно прежним образом, через установку старого имени класса. Такой подход часто применяют в событиях при добавлении интерактивности странице.

Свойства и методы которые позволяют изменять классы и id элементов

Рассмотрим несколько полезных свойств и методов, которые удобно применять для значения атрибутов class и id:

  1. id = value — сменяет значение id;
  2. className = value — возвращает или устанавливает новое имя атрибута class;
  3. class = value — аналогично предыдущему;
  4. setAttribute(name, value) — метод позволяет установить класс или айди элементу, а также сменить значение имеющегося;

Другие примеры установки различных стилей

Рассмотрим несколько примеров для установки стилей для различных элементов через JavaScript:

  • object.style.animation = «name duration timingFunction delay iterationCount direction fillMode playState» создание анимации для объекта.
  • object.style.background = «color image repeat attachment position size origin clip» — установка свойств для фона.
  • object.style.border = «width style color» — установка стилей для границ элемента.
  • object.style.columns = «auto|column-width column-count» — установка свойств для колонок.
  • object.style.font = «font-style font-variant font-weight font-size/line-height — короткий способ установки нужных свойств для шрифта.
  • object.style.opacity — добавление элементу прозрачности.
  • object.style.outline = «width style color» — установка внешней границы для элемента.

Объект classList

ClassList хранит объект всех классов определенных элементов. Он обладает своими методами и свойствами для манипуляций с классами. Рассмотрим несколько примеров:

  • document.getElementById(«myDIV»).classList — получение объекта classList, который является списком классов с айди myDiv.
  • document.getElementById(«myDIV»).classList.add(«mystyle», «anotherClass», «thirdClass») — здесь определенному элементу было установлено три класса с именами, указанными в параметрах.
  • document.getElementById(«myDIV»).classList.remove(«mystyle») — здесь элементу удалили класс с именем, указанным в параметре метода remove.
  • document.getElementById(«myDIV»).classList.remove(«mystyle», «anotherClass», «thirdClass») — аналогично предыдущему примеру, однако здесь удаляется сразу несколько классов.
  • document.getElementById(«myDIV»).classList.length — получение длины списка классов.
  • document.getElementById(«myDIV»).classList.item(0) — получения первого элемента с классом из списка.
  • document.getElementById(«myDIV»).classList.contains(«mystyle») — проверяем, есть ли такой класс.
  • document.getElementById(«myDropdown»).classList.toggle(«show») — установка атрибута класса и его значения.

Другие примеры

Пример 1: Добавление надписи посредством нажатия на кнопку

<p id=»demo»>Click the button to change the text in this paragraph.</p>

<button onclick=»myFunction()»>Try it</button>

<script>
function myFunction() {
document.getElementById(«demo»).innerHTML = «Hello World»;
}
</script>

Пример 2: Смена цвета текста параграфа

<p id=»demo»>Click the button to change the color of this paragraph.</p>

<button onclick=»myFunction()»>Try it</button>

<script>
function myFunction() {
var x = document.getElementById(«demo»);
x.style.color = «red»;
}
</script>

Пример 3: Смена фонового цвета среднего параграфа

<div class=»example»>
<p>P element in first div with class=»example». Div’s index is 0.</p>
</div>

<div class=»example color»>
<p>P element in first div with class=»example color». Div’s index is 0.</p>
</div>

<div class=»example color»>
<p>P element in second div with class=»example color». Div’s index is 1.</p>
</div>

<p>Click the button to change the background color of the first div element with the classes «example» and «color».</p>

<button onclick=»myFunction()»>Try it</button>

<script>
function myFunction() {
var x = document.getElementsByClassName(«example color»);
x[0].style.backgroundColor = «red»;
}
</script>

Пример 4: Смена фона для всех элементов списка

<p>This is a p element</p>

<p>This is also a p element.</p>

<p>This is also a p element — Click the button to change the background color of all p elements in this document.</p>

<button onclick=»myFunction()»>Try it</button>

<script>
function myFunction() {
var x = document.getElementsByTagName(«P»);
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = «red»;
}
}
</script>

Пример 5: Получение всех параметров документа

<p>An unordered list:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<p>Click the button to display the innerHTML of the UL element (index 3).</p>

<button onclick=»myFunction()»>Try it</button>

<p id=»demo»></p>

<script>
function myFunction() {
var x = document.getElementsByTagName(«*»);
document.getElementById(«demo»).innerHTML = x[3].innerHTML;
}
</script>

Обратите внимание, здесь все элементы помещены в список через параметр «*». Обращение к любому из них также осуществляется через индекс.

Итого

Современный JavaScript не является удобным инструментом для манипуляций со стилями. доя этого есть ряд других инструментов, к примеру JQuery. Однако каждый разработчик должен знать как управлять стилями нативным языком.

Summary: in this tutorial, you will learn how to use the style property to manipulate the inline style of the HTML elements.

Setting inline styles

To set the inline style of an element, you use the style property of that element:

element.style

Code language: CSS (css)

The style property returns the read-only CSSStyleDeclaration object that contains a list of CSS properties. For example, to set the color of an element to red, you use the following code:

element.style.color = 'red';

Code language: JavaScript (javascript)

If the CSS property contains hyphens (-) for example -webkit-text-stroke you can use the array-like notation ([]) to access the property:

element.style.['-webkit-text-stock'] = 'unset';

Code language: JavaScript (javascript)

The following table shows the common CSS properties:

CSS JavaScript
background background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color borderColor
border-left borderLeft
border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth
clear clear
clip clip
color color
cursor cursor
display display
filter filter
float cssFloat
font font
font-family fontFamily
font-size fontSize
font-variant fontVariant
font-weight fontWeight
height height
left left
letter-spacing letterSpacing
line-height lineHeight
list-style listStyle
list-style-image listStyleImage
list-style-position listStylePosition
list-style-type listStyleType
margin margin
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
overflow overflow
padding padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
page-break-after pageBreakAfter
page-break-before pageBreakBefore
position position
stroke-dasharray strokeDasharray
stroke-dashoffset strokeDashoffset
stroke-width strokeWidth
text-align textAlign
text-decoration textDecoration
text-indent textIndent
text-transform textTransform
top top
vertical-align verticalAlign
visibility visibility
width width
z-index zIndex

To completely override the existing inline style, you set the cssText property of the style object. For example:

element.style.cssText = 'color:red;background-color:yellow';

Code language: JavaScript (javascript)

Or you can use the setAttribute() method:

element.setAttribute('style','color:red;background-color:yellow');

Code language: JavaScript (javascript)

Once setting the inline style, you can modify one or more CSS properties:

element.style.color = 'blue';

Code language: JavaScript (javascript)

If you do not want to completely overwrite the existing CSS properties, you can concatenate the new CSS property to the cssText as follows:

element.style.cssText += 'color:red;background-color:yellow';

Code language: JavaScript (javascript)

In this case, the += operator appends the new style string to the existing one.

The following css() helper function is used to set multiple styles for an element from an object of key-value pairs:

function css(e, styles) { for (const property in styles) e.style[property] = styles[property]; }

Code language: JavaScript (javascript)

You can use this css() function to set multiple styles for an element with the id #content as follows:

let content = document.querySelector('#content'); css(content, { background: 'yellow', border: 'solid 1px red'});

Code language: JavaScript (javascript)

The following example uses the style object to set the CSS properties of a paragraph with the id content:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Style Demo</title> </head> <body> <p id="content">JavaScript Setting Style Demo!</p> <script> let p = document.querySelector('#content'); p.style.color = 'red'; p.style.fontWeight = 'bold'; </script> </body> </html>

Code language: HTML, XML (xml)

How it works:

  • First, select the paragraph element whose id is content by using the querySelector() method.
  • Then, set the color and font-weight properties of the paragraph by setting the color and fontWeight properties of the style object.

Getting inline styles

The style property returns the inline styles of an element. It is not very useful in practice because the style property doesn’t return the rules that come from elsewhere e.g., styles from an external style sheet.

To get all styles applied to an element, you should use the window.getComputedStyle() method.

Summary

  • Use the properties of element.style object to set the inline CSS properties for the HTML element.

Was this tutorial helpful ?

Понравилась статья? Поделить с друзьями:
  • Javascript как изменить код
  • Javascript как изменить кнопку
  • Javascript как изменить значение атрибута
  • Javascript websocket error
  • Javascript try catch error object