How to add, remove and toggle css classes in javascript

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarShow/Force ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsJS String LengthJS ExponentiationJS Default ParametersGet Current URLGet Current Screen SizeGet Iframe Elements

October 2019

Private events are now on your Feed

When you’re invited to a private event, now you’ll see this information on your Activity Feed too. It’s part of our work to make your Feed a place you can see and filter all the info relevant to you.

Edit your profile directly

Now you can directly edit your profile page so it’s easier to see what info you’re sharing with other parents. We’ve separated out your account details, privacy and notification settings.

Helping parents to sign up

We’re helping you grow your school’s Classlist community by giving Admins a bit more info so they can remind new parents to join up.

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Methods

The method accepts an object that defines the TailwindCSS classes that you wish to use. It converts this object into a string of classnames.

For basic cases, you simply provide an object where the keys are the part of a Tailwind class before the first . For example, would be represented by and would be represented by .

import { classList } from 'tailwind-classlist';

const classes = classList({
  m: 2,
  cursor: 'pointer',
  bg: 'grey-400',
});

// Outputs "m-2 cursor-pointer bg-grey-400"

To use multiple classes with the same Tailwind prefix, group them together into an array.

const classes = classList({
  text: 'lg', 'grey-600'
});

// Outputs "text-lg text-grey-600"

To use state variants and responsive prefixes, group them together into an object.

const classes = classList({
  bg: 'white',
  text: 'red-400',
  hover: { 
  	bg: 'red-400', 
  	text: 'white',
  },
  focus: {
  	outline: 'none',
  },
  md: {
  	text: 'lg',
  }
});

// Outputs "bg-white text-red-400 hover:bg-red-400 hover:text-white focus:outline-none"

To use both state variants and responsive prefixes, use a nested object that begins with the responsive prefix first.

const classes = classlist({
  md: {
  	hover: {
  		bg: 'red-800',
  		text: 'blue-400',
  	}
  }  
});

// Outputs "md:hover:bg-red-800 md:hover:text-blue-400"

Some classes in Tailwind don’t have any dashes in their name. These can be included by setting their value to .

const classes = classList({
  fixed: true,
  italic: true,
});

// Outputs "fixed italic"

The method accepts 2 or more classList strings and merges them together, overwriting any conflicting classes as it goes.

import { mergeClassLists } from 'tailwind-classlist';

const classListA = 'bg-blue-500 m-4';
const classListB = 'bg-red-500 p-4';
const combinedClasses = mergeClassLists(classListA, classListB); 

// Outputs 'bg-red-500 m-4 p-4'

It recognizes when multiple classes have the same prefix but shouldn’t overwrite eachother. In the example below, overwrites , but it has no effect on .

const classListA = 'bg-blue-500 bg-bottom m-4';
const classListB = 'bg-red-500 p-4';
const combinedClasses = mergeClassLists(classListA, classListB);

// Outputs 'bg-red-500 bg-bottom m-4 p-4';

Similarly, it recognizes classes with conflicting styles that don’t have the same prefix. In the example below, and both affect the CSS property, so will overwrite .

const classListA = 'bg-blue-500 bg-bottom text-xs m-4 static';
const classListB = 'bg-red-500 p-4 text-lg fixed';
const result = mergeClassLists(classListA, classListB);

// Outputs 'bg-red-500 bg-bottom text-lg m-4 p-4 fixed'

Any classes that aren’t part of the default Tailwind library will pass through without any filtering.

const classListA = 'bg-blue-500 text-xs sc-0dWm9Vdw2';
const classListB = 'bg-red-500 fixed test-class';
const result = mergeClassLists(classListA, classListB);

// Outputs 'sc-0dWm9Vdw2 test-class bg-red-500 text-xs fixed'

The method performs the opposite operation as classList. It takes a string of classnames and returns a parsed classList object. Any classes that aren’t a part of the default Tailwind library will be grouped into an array under the key .

import { parseClassList } from 'tailwind-classlist';

const classes = 'm-2 cursor-pointer bg-grey-400';
const classObj = parseClassList(classes);
// Outputs { m: 2, cursor: 'pointer', bg: 'grey-400' };

const classes = 'm-2 cursor-pointer sc-8d3jd6Ko customclass';
const classObj = parseClassList(classes);
// Outputs { m: 2, cursor: 'pointer', extraClasses:  };

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Наследование

Синтаксис:

Посмотрим как это выглядит на практике. В примере ниже объявлено два класса: и наследующий от него :

Как видим, в доступны как свои методы, так и (через ) методы родителя.

Это потому, что при наследовании через формируется стандартная цепочка прототипов: методы находятся в , методы – в , и они связаны через :

Как видно из примера выше, методы родителя () можно переопределить в наследнике. При этом для обращения к родительскому методу используют .

С конструктором – немного особая история.

Конструктор родителя наследуется автоматически. То есть, если в потомке не указан свой , то используется родительский. В примере выше , таким образом, использует от .

Если же у потомка свой , то, чтобы в нём вызвать конструктор родителя – используется синтаксис с аргументами для родителя.

Например, вызовем конструктор в :

Для такого вызова есть небольшие ограничения:

• Вызвать конструктор родителя можно только изнутри конструктора потомка. В частности, нельзя вызвать из произвольного метода.
• В конструкторе потомка мы обязаны вызвать до обращения к . До вызова не существует , так как по спецификации в этом случае именно инициализирует .

Второе ограничение выглядит несколько странно, поэтому проиллюстрируем его примером:

Using classList Property

There is even a better way to manipulate CSS classes in JavaScript, thanks to the property. It is a read-only property that returns a live DOMTokenList collection of all the classes applied to the element.

The property works in all modern browsers, and IE10 and above.

You can use the property to easily add, remove, and toggle CSS classes from an element in vanilla JavaScript.

Say we have an element like below:

Let us grab a reference to the above element, and print the existing classes on the console:

Let us now look at the popular methods of the collection, returned by the property. We’ll use these methods to manage and update CSS classes for an HTML element.

The method returns the class in the collection by its index, or if the index is greater than or equal to the list’s property:

The method adds one or more classes to the HTML element:

Now, the element looks like below:

If you try to add a class that already exists, the method will ignore it. To see how it works, let us add more to the pizza:

Here is the element now:

The method returns if the element contains the given class, otherwise :

The method is used to remove one or more classes from the element:

If you try to remove a class that doesn’t exist, as we did in the above example, there won’t be any error. JavaScript will simply ignore it.

is an interesting method. It removes the class if it already exists, otherwise, it adds it to the collection.

Without this method, you have to manually check if the class exists using before toggling it on or off:

With the method, you simply pass the name of the class which you want to toggle:

The method returns if the class was added, and if it was removed:

You can also pass a second boolean parameter to the method to indicate whether to add the class or remove it. This will turn into one way-only operation. If the second argument evaluates to , then the class will only be removed, but not added. If it evaluates to , then the class will only be added, but not removed.

Here is an example:

The method can be used to replace a CSS class with another class:

This method returns if the target class is successfully replaced with the new class, otherwise .

Methods

Method	Description
add(class1, class2, …)	Adds one or more class names to an element.If the specified class already exist, the class will not be added
contains(class)	Returns a Boolean value, indicating whether an element has the specified class name. Possible values: true — the element contains the specified class name false — the element does not contain the specified class name
item(index)	Returns the class name with a specified index number from an element. Index starts at 0.Returns null if the index is out of range
remove(class1, class2, …)	Removes one or more class names from an element.Note: Removing a class that does not exist, does NOT throw an error
toggle(class, true|false)	Toggles between a class name for an element.The first parameter removes the specified class from an element, and returns false. If the class does not exist, it is added to the element, and the return value is true.The optional second parameter is a Boolean value that forces the class to be added or removed, regardless of whether or not it already existed. For example:Remove a class: element.classList.toggle(«classToRemove», false); Add a class: element.classList.toggle(«classToAdd», true);Note: The second parameter is not supported in Internet Explorer or Opera 12 and earlier.

Переопределение конструктора

С конструкторами немного сложнее.

До сих пор у не было своего конструктора.

Согласно , если класс расширяет другой класс и не имеет конструктора, то автоматически создаётся такой «пустой» конструктор:

Как мы видим, он просто вызывает конструктор родительского класса. Так будет происходить, пока мы не создадим собственный конструктор.

Давайте добавим конструктор для . Он будет устанавливать в дополнение к :

Упс! При создании кролика – ошибка! Что не так?

Если коротко, то в классах-потомках конструктор обязан вызывать , и (!) делать это перед использованием .

…Но почему? Что происходит? Это требование кажется довольно странным.

Конечно, всему есть объяснение. Давайте углубимся в детали, чтобы вы действительно поняли, что происходит.

В JavaScript существует различие между «функцией-конструктором наследующего класса» и всеми остальными. В наследующем классе соответствующая функция-конструктор помечена специальным внутренним свойством .

Разница в следующем:

• Когда выполняется обычный конструктор, он создаёт пустой объект и присваивает его .
• Когда запускается конструктор унаследованного класса, он этого не делает. Вместо этого он ждёт, что это сделает конструктор родительского класса.

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

Чтобы конструктор работал, он должен вызвать до того, как использовать , чтобы не было ошибки:

Примеры

Пример: добавляем или удаляем класс ‘highlight’ при клике.

<!DOCTYPE html>
<html>
<head>
 <style>
 p { margin: 4px; font-size:16px; font-weight:bolder;
     cursor:pointer; }
 .blue { color:blue; }
 .highlight { background:yellow; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <p class="blue">Click to toggle</p>
 <p class="blue highlight">highlight</p>
 <p class="blue">on these</p>
 <p class="blue">paragraphs</p>
<script>
   $("p").click(function () {
     $(this).toggleClass("highlight");
   });
</script>
</body>
</html>

Демо

Пример: добавляем класс «highlight» при каждом третьем клике; удалить при каждом втором.

<!DOCTYPE html>
<html>
<head>
 <style>
 p { margin: 4px; font-size:16px; font-weight:bolder;
     cursor:pointer; }
 .blue { color:blue; }
 .highlight { background:red; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <p class="blue">Click to toggle (<span>clicks: 0</span>)</p>
 <p class="blue highlight">highlight (<span>clicks: 0</span>)</p>
 <p class="blue">on these (<span>clicks: 0</span>)</p>
 <p class="blue">paragraphs (<span>clicks: 0</span>)</p>
<script>
var count = 0;
$("p").each(function() {
 var $thisParagraph = $(this);
 var count = 0;
 $thisParagraph.click(function() {
   count++;
   $thisParagraph.find("span").text('clicks: ' + count);
   $thisParagraph.toggleClass("highlight", count % 3 == 0);
 });
});
</script>
</body>
</html>

Демо

Пример: добавляем/удаляем классы к элементам div в зависимости от нажатых кнопок.

<!DOCTYPE html>
<html>
<head>
 <style>
.wrap > div { float: left; width: 100px; margin: 1em 1em 0 0;
             padding=left: 3px; border: 1px solid #abc; }
div.a { background-color: aqua; }
div.b { background-color: burlywood; }
div.c { background-color: cornsilk; }
</style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="buttons">
 <button>toggle</button>
 <button class="a">toggle a</button>
 <button class="a b">toggle a b</button>
 <button class="a b c">toggle a b c</button>
 <a href="#">reset</a>
</div>
<div class="wrap">
 <div></div>
 <div class="b"></div>
 <div class="a b"></div>
 <div class="a c"></div>
</div>
<script>
var cls = ;
var divs = $('div.wrap').children();
var appendClass = function() {
 divs.append(function() {
   return '<div>' + (this.className || 'none') + '</div>';
 });
};
appendClass();
$('button').on('click', function() {
 var tc = this.className || undefined;
 divs.toggleClass(tc);
 appendClass();
});
$('a').on('click', function(event) {
 event.preventDefault();
 divs.empty().each(function(i) {
   this.className = cls;
 });
 appendClass();
});
</script>
</body>
</html>

Демо

Синтаксис класса в JavaScript

Во-первых, как для любой переменной или функции, для класса нужно задать имя после ключевого слова . Оно записывается с большой буквы и после него идут фигурные скобки (тело класса), в которых будут находится все функции (методы) этого класса.

Синтаксис класса в JS

JavaScript

class NameOfClass {
// методы класса
constructor() { … }
method1() { … }
method2() { … }
method3() { … }
…
}

1 2 3 4 5 6 7 8

classNameOfClass{ // методы класса constructor(){…} method1(){…} method2(){…} method3(){…} … }

Основной функцией в классе является конструктор (). Именно он вызывается при создании экземпляра класса строкой вида:

Создание экземпляра класса

JavaScript

let firstExample = new NameOfClass();

1	let firstExample=newNameOfClass();

В классе может быть только один конструктор, т.е. метод с именем constructor вы можете объявить однократно.

Достаточно часто внутрь функции-конструктора передаются некоторые переменные, которые в становятся свойствами этого класса и затем используются в различных его методах. Например, нам необходимо создать класс, который будет выводить часы, минуты и секунды. Мы не будем использовать в нем методы объекта Date, но он позволит нам манипулировать временем. Назовем этот класс Clock и используем в качестве свойств то, что нам надо вывести.

Класс для вывода часов, минут и секунд

JavaScript

class Clock {
constructor(hour, min, sec) {
this.hour = hour;
this.min = min;
this.sec = sec;
}
showClock(){
document.write(`<h4> ${this.hour} : ${this.min} : ${this.sec}<h4>`);
}
}
let clock1 = new Clock(12, 17, 36);
clock1.showClock();

1 2 3 4 5 6 7 8 9 10 12

classClock{ constructor(hour,min,sec){ this.hour=hour; this.min=min; this.sec=sec; } showClock(){ document.write(`<h4>${this.hour}${this.min}${this.sec}<h4>`); } } clock1.showClock();

В конструктор класса мы передаем начальные значения часов, минут и секунд. А функция выведет нам все переданные значения в виде строки с разделением с помощью двоеточия.

Обратите внимание на то, что внутри класса все свойства записываются с помощью ключевого слова , которое указывает на текущий объект класса Clock. Запись функции-конструктора в классе можно заменить такой функцией:. Использование this внутри функции-конструктора

JavaScript

function Clock(hour, min, sec) {
// this = {}; (неявным образом создается пустой объект)

Использование this внутри функции-конструктора

JavaScript

function Clock(hour, min, sec) {
// this = {}; (неявным образом создается пустой объект)

// добавляет свойства к this
this.hour = hour;
this.min = min;
this.sec = sec;

// return this; (объект из функции неявно возвращается с уже назначенными свойствами)
}

1 2 3 4 5 6 7 8 9 10

functionClock(hour,min,sec){ // this = {};  (неявным образом создается пустой объект) // добавляет свойства к this this.hour=hour; this.min=min; this.sec=sec; // return this;  (объект из функции неявно возвращается с уже назначенными свойствами) }

Обычно конструкторы ничего не возвращают явно. Их задача – записать все необходимые свойства в , а иногда и вызвать методы, чтобы мы могли пользоваться экземпляром класса.

Обратите внимание на то, что классы всегда нужно объявлять ДО их использования, в отличие от функций.Объявление функции (function declaration) совершает подъём (hoisted), т.е. интерпретатор знает о ее существовании до момента вызова, где бы она не была объявлена, в то время как объявление класса (class declaration) — нет

Поэтому сначала нужно объявить класс и только потом создавать его экземпляры во избежание ошибок типа :

Поэтому мы объявляем внизу (строка 11)  переменную , которая является экземпляром созданного нами . Результат:

Мы можем вывести с помощью нашего класса текущее время, воспользовавшись встроенным в JavaScript классом Date и его методами.

Использование класса Data для экземпляра класса Clock

JavaScript

let now = new Date();
let clock2 = new Clock(now.getHours(), now.getMinutes(), now.getSeconds());
clock2.showClock();

1 2 3

let now=newDate(); let clock2=newClock(now.getHours(),now.getMinutes(),now.getSeconds()); clock2.showClock();

Результат:

Что же будет, если мы создадим еще один экземпляр класса Clock с цифрами, большими, чем в привычном нам формате часов.

Создание экземпляра класса Clock с параметрами, которые не применимы для часов

JavaScript

let clock3 = new Clock(27, 122, 368);
clock3.showClock();

1 2	let clock3=newClock(27,122,368); clock3.showClock();

В результате выведутся все цифры, которые мы передали в функцию-конструктор, т.к. она сейчас не предполагает каких-либо изменений, связанных с форматом привычных нам часов.

November 2019

Introducing our NEW SignUp tool!

Use our new SignUp Lists together with the Classlist Events tool to sell tickets, promote your event and organise volunteers in minutes all on one app.

Add extra event owners to your community event and you’ll be able to create and manage your event and SignUp Lists on Classlist collaboratively with your PTA team too.

How do SignUp Lists work?

• SignUp Lists are online task lists you create and share on Classlist to let parents know how they can help your PTA!
• Add individual tasks or create multiple time slots on a particular day
• Parents sign up with the click of a button in the app and get an automatic reminder the day before

How do I create a SignUp List?

Go to Community Events (on the green admin side), create an event or select an existing one, click the ‘Add new SignUp’ button. PTAs are already using them to help organise their Christmas events on Classlist.

SignUp lists aren’t just for events!

We’ve designed them to be flexible enough so a class rep or member of school staff can use them to schedule parents for the class reading rota, find parent helpers for school trips and even easily allocate timeslots for parents’ evenings. Saving your school and class reps valuable admin time and helping teachers get much-needed support.

Community Events get an upgrade

We’ve redesigned the whole Community Events feature so you can use it to quickly collect RSVPs for simple events such as your coffee morning or add on our advanced features to supercharge your larger events.

We’ve got new functionality too

• Now add ‘event owners’ to your Community Events so you can organise them as a team!
• Ask multiple questions when you add tickets to quickly collate important info
• Track RSVPs & ticket sales, send reminders and download lists in the new ‘Manage Events’ section

Don’t forget you can now make your events open to the public. Select ‘public event’ and share your event link — perfect for promoting your Christmas fair to the wider community!

Class Expression

Также, как и Function Expression, классы можно задавать «инлайн», в любом выражении и внутри вызова функции.

Это называется Class Expression:

В примере выше у класса нет имени, что один-в-один соответствует синтаксису функций. Но имя можно дать. Тогда оно, как и в Named Function Expression, будет доступно только внутри класса:

В примере выше имя будет доступно только внутри класса и может быть использовано, например, для создания новых объектов данного типа.

Наиболее очевидная область применения этой возможности – создание вспомогательного класса прямо при вызове функции.

Например, функция в примере ниже создаёт объект по классу и данным, добавляет ему и пишет в «реестр» :

Работа с классами через DOM-свойство className

Если кратко, то сначала нужно разобраться что такое DOM.

DOM – это фундаментальная сущность, которую браузер создаёт после получения HTML кода запрашиваемой страницы и её парсинга. DOM – это объектная модель HTML страницы и API для работы с ней через JavaScript. Это означает то, что с помощью JavaScript сценариев вы можете изменять DOM «на лету» и тем самым страницу. Но DOM браузер создаёт не только для взаимодействия с ней через JavaScript. Он её, например, также использует для создания других структур, которые используются для отрисовки страницы во вкладке браузера.

При создании браузером DOM, HTML-теги становятся объектами, а HTML-атрибуты – свойствами этих объектов. Обычно имена атрибутов и соответствующих им DOM-свойств совпадают. Но, например, атрибут и соответствующее ему DOM-свойство нет. Связано с тем, что раньше ключевые слова нельзя было использовать в качестве названия DOM-свойств. Из-за этого было выбрано в качестве названия . В последствии, когда это ограничение убрали имя DOM-свойству не стали изменять и сейчас она имеет тоже самое название.

В jQuery для работы с DOM-свойствами используется .

Рассмотрим применения данного метода для управления классами элемента.

<img id="logo" class="img-responsive" src="..." alt= "">

<script>
// получим элемент #logo
var logo = $('#logo');
// получим значение DOM-свойства className
console.log(logo.prop('className'));
// кстати в jQuery к нему можно ещё обращаться, используя class
console.log(logo.prop('class'));
// изменим значение DOM-свойства className
logo.prop('className', 'img-fluid');
// удалим классы у элемента
logo.prop('class','');
// добавим классы "img-logo img-circle" к элементу
logo.prop('className', 'img-logo img-circle');
</script>

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

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

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

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

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

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

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

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

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.style.backgroundColor = 'green';
}

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

Свойство cssText

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

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

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

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

//установим "font-size:40px; color:blue;" всем элементам в коллекции, содержащейся в intro
for (var i = 0, length = intro.length; i < length; i++) {
  intro.style.cssText = "font-size:40px; color:blue;";
}
</script>

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

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

Например:

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

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

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

Итого

• Атрибуты – это то, что написано в HTML.
• Свойство – это то, что находится внутри DOM-объекта.

Таблица сравнений для атрибутов и свойств:

Свойства	Атрибуты
Любое значение	Строка
Названия регистрозависимы	Не чувствительны к регистру
Не видны в	Видны в

Синхронизация между атрибутами и свойствами:

• Стандартные свойства и атрибуты синхронизируются: установка атрибута автоматически ставит свойство DOM. Некоторые свойства синхронизируются в обе стороны.
• Бывает так, что свойство не совсем соответствует атрибуту. Например, «логические» свойства вроде , всегда имеют значение , а в атрибут можно записать произвольную строку.Выше мы видели другие примеры на эту тему, например .

Нестандартные атрибуты:

• Нестандартный атрибут (если забыть глюки старых IE) никогда не попадёт в свойство, так что для кросс-браузерного доступа к нему нужно обязательно использовать .
• Атрибуты, название которых начинается с , можно прочитать через . Эта возможность не поддерживается IE10-.

Для того, чтобы избежать проблем со старыми IE, а также для более короткого и понятного кода старайтесь везде использовать свойства, а атрибуты – только там, где это действительно нужно.

А действительно нужны атрибуты очень редко – лишь в следующих трёх случаях:

1. Когда нужно кросс-браузерно получить нестандартный HTML-атрибут.
2. Когда нужно получить «оригинальное значение» стандартного HTML-атрибута, например, .
3. Когда нужно получить список всех атрибутов, включая пользовательские. Для этого используется коллекция .

Если вы хотите использовать собственные атрибуты в HTML, то помните, что атрибуты с именем, начинающимся на валидны в HTML5 и современные браузеры поддерживают доступ к ним через свойство .