Javascript добавить класс к элементу: Как добавить класс к элементу js?

Содержание

Работа с классами и стилями фреймворка Vue.js

Очень часто необходимо динамически изменять CSS-классы и стили элементов в зависимости от состояния приложения. Так как это — атрибуты, можно использовать v-bind, однако это не удобно и может приводить к ошибкам.
В Vue специально для работы с классами и стилями есть дополнительные возможности директивы v-bind. Эти атрибуты при динамической связывании могут принимать строки, массивы, объекты.

Связывание CSS-классов

Использование объектов

Для динамического задания или удаления CSS классов можно передать в директиву v-bind:class объект:


<div v-bind:class="{ active: isActive }"></div>

Запись выше обозначает, что наличие класса active будет определяться если параметр isActive является true.

Также, v-bind:class можно использовать и совместно с обычным атрибутом class:


<div
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

При использовании этих данных:


data: {
  isActive: true,
  hasError: false
}

Получится:


<div></div>

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


<div v-bind:class="classObject"></div>


data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

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


<div v-bind:class="classObject"></div>


data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

Использование массивов

В v-bind:class можно передать массив:


<div v-bind:class="[activeClass, errorClass]"></div>


data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

В результате получим:


<div></div>

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


<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

В этом случае errorClass будет применён к элементу всегда, а activeClass — только когда isActive является true.
Но такая конструкция становится немного громоздкой, если есть несколько классов. Поэтому можно использовать смешанный синтаксис:


<div v-bind:class="[{ active: isActive }, errorClass]"></div>

Использование с компонентами

При применении атрибута class к пользовательскому компоненту, классы будут добавлены к его корневому элементу. Собственные классы элемента потеряны не будут.


Vue.component('my-component', {
  template: '<p>Hi</p>'
})

Если указать дополнительные классы:


<my-component></my-component>

В результате рендеринга будет:


<p>Hi</p>

Такое делается и для связывания классов с данными:


<my-component v-bind:class="{ active: isActive }"></my-component>

Если isActive истинно, HTML будет:


<p>Hi</p>

Связывание inline-стилей

Использование объектов

Объектная запись для v-bind:style проста и выглядит почти как CSS, но на самом деле, это объект JavaScript. Для указания свойств CSS можно применять как camelCase, так и kebab-case:


<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>


data: {
  activeColor: 'red',
  fontSize: 30
}

Передача объекта стилей по имени может сделать код чище:


 <div v-bind:style="styleObject"></div>


data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

Можно также использовать и вычисляемые свойства, возвращающие объекты стилей.

Использование массивов

Запись v-bind:style с массивом позволяет применить несколько объектов стилей к одному и тому же элементу:


<div v-bind:style="[baseStyles, overridingStyles]"></div>

Автоматические префиксы

При использовании в v-bind:style свойств CSS, которые требуют указания вендорных префиксов, Vue автоматически определит это и добавит префиксы к стилям.

Множественные значения

Можно предоставить массив из нескольких (префиксных) значений для свойства style:


<div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

Это отобразит последнее значение в массиве.

Звезда на небосклоне мировой науки. Юрию Оганесяну 90 лет

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

Юрий Оганесян

Выдающемуся советскому и российскому ученому, лидеру в области синтеза сверхтяжелых элементов, научному руководителю Лаборатории ядерных реакций ОИЯИ, человеку, в честь которого назван элемент таблицы Менделеева оганесон, первому лауреату премии ЮНЕСКО-России им. Д.И. Менделеева академику Юрию Цолаковичу Оганесяну сегодня исполняется 90 лет.

Интерес ученого к ядерной физике сложно было предсказать. Юрий Оганесян родился 14 апреля 1933 г. в Ростове-на-Дону в армянской семье. Его отцом был главный теплотехник города Цолак Оганесян. В конце 1930-х гг. семья переехала в Армению, куда отец был направлен в командировку на строительство завода синтетического каучука. Когда мальчик жил в Ереване, столице Армении, сосед-художник учил Юрия рисовать. Одаренный творческим талантом юноша решил стать архитектором и даже подал документы в Московский архитектурный институт, где успешно прошел вступительные испытания. «Мне было ясно, что я должен стать архитектором. Это своеобразная семейная традиция. Однако мои друзья по школе решили ехать в Москву, чтобы стать физиками. В то время “физики были в почете”. Ну и я за ними, чтобы попробовать свои силы. У меня была медаль, но в МГУ на физфаке, в Физтехе и в МИФИ и медалисты должны были сдавать экзамены по физике и математике. Мне эти предметы давались легко, потому я прошел собеседование в МИФИ сразу и… пошел сдавать экзамены в архитектурный институт. А там — рисунок и живопись. Я их тоже сдал. Потребовали документы. Я возвращаюсь за ними в МИФИ, а мне говорят: поздно, документы находятся в Комитете госбезопасности, проверять их будут долго — два-три месяца.

Положение дурацкое…», — говорит сам ученый.

По воле случая Юрий Оганесян остался в МИФИ, хотя его «творческие метания» еще продолжались. Он участвовал в конкурсе архитекторов по строительству арки в честь воссоединения Украины с Россией, вместе с товарищем оказался среди призеров, но арку передумали строить, а Юрий решил основательно погрузиться в физику.

После окончания МИФИ в 1956 г. молодого ученого распределили в Курчатовский институт в лабораторию к Георгию Николаевичу Флерову, физику-ядерщику, ученику и соратнику Игоря Васильевича Курчатова. В 1956 г. филиал Курчатовского института исследований в области физики высоких энергий был преобразован в Объединенный институт ядерных исследований (ОИЯИ) в Дубне, куда в 1968 г. перешли работать Ю.Ц. Оганесян и Г.Н. Флеров. И в 1958 г. Оганесян занял должность младшего научного сотрудника в Лаборатории ядерных реакций (ЛЯР), организованной Флеровым. Юрию Оганесяну предстоит проработать бок о бок с Георгием Николаевичем больше 30 лет, а после его ухода возглавить лабораторию.

Почетный директор Лаборатории ядерных реакций академик АН СССР Георгий Флеров и академик АН СССР Юрий Оганесян. Объединенный институт ядерных исследований

Источник: РИА Новости / А. Князев

Под руководством Г.Н. Флерова Ю.Ц. Оганесян активно раскрывал свой научный потенциал и развивал навыки руководителя. Один из первых проектов, который возглавил ученый, — разработка нового синхротрона. Он руководил запуском циклотрона У-300 в Дубне и, осуществив успешный запуск ускорителя в 1961 г., занялся экспериментальными исследованиями. Юрий Оганесян возглавил группу молодых ученых, среди которых были Ю.Э. Пенионжкевич, С.А. Карамян, Б.И. Пустыльник, В.В. Каманин, И.В. Кузнецов, Ф.Н. Нормуратов, Б.А. Гвоздев. Коллектив занимался делением ядер, механизмами ядерных реакций, высокоспиновыми состояниями ядер и другими исследованиями, определившими передовой уровень Лаборатории ядерных реакций.

Организаторские навыки и научные устремления позволили Юрию Цолаковичу уверенными шагами продвигаться по карьерной лестнице отечественной науки. В 1971 г. Ю.Ц. Оганесян назначен начальником физического отдела исследований тяжелых ядер, в 1976 г. — заместителем директора по научной работе, в 1989 г. — директором ЛЯР. В 1980 г. Юрию Оганесяну было присвоено ученое звание профессора, а в 1990 г. по рекомендации Г.Н. Флерова он был избран членом-корреспондентом АН СССР.

«Думая о том, кому я могу передать руководство всей совокупностью работ по физике тяжелых ионов, без малейшего колебания называю моего ученика Юрия Цолаковича Оганесяна. Замечательный физик-экспериментатор Ю.Ц. Оганесян внес определяющий вклад в становление и развитие ряда направлений физики тяжелых ионов. Его отличает оригинальный подход к проблемам, умение взглянуть на физическую задачу с неожиданной стороны, довести решение до конечного результата…», — писал членам академии Флеров накануне выборов. Невозможно переоценить влияние, которое оказал Флеров на своего ученика и соратника Оганесяна. Юрий Цолакович во многих интервью тепло вспоминает своего наставника, который помог ему протоптать тропинку к вершинам мировой науки.

Важная часть научной жизни Ю.Ц. Оганесяна посвящена разработке ускорительного комплекса. Он инициировал создание новейших ускорителей, предназначенных для исследования определенного класса ядерных взаимодействий и свойств продуктов ядерных реакций, и принимал непосредственное участие в работе над широкополосным магнитным анализатором МСП-144, электростатическим сепаратором ВАСИЛИСА, сепаратором нейтронно-избыточных легких ядер АКУЛИНА и др.

В 1990-е гг., когда Ю.Ц. Оганесян был директором ЛЯР, начались крупные преобразования в стране и происходило резкое сокращение научных исследований. Это стало настоящим испытанием для организаторского таланта Оганесяна. «Можно плакаться и горевать, выискивать уважительные и объективные причины, оправдывая собственную бездеятельность, а нужно искать выходы из трудного положения, находить новые источники финансирования, иные способы решения возникающих проблем», — говорил руководитель ЛЯР на научном совете. И он нашел выход и сохранил лабораторию — провел частичное сокращение кадров и привлек критически необходимое финансирование: крупные гранты от Миннауки, от Минатома, от губернатора Московской области, международных партнеров. Юрий Оганесян был директором Лаборатории ядерных реакций им. Г.Н. Флерова Объединенного института ядерных исследований вплоть до 1996 г., а с 1997 г. по настоящее время он занимает должность научного руководителя ЛЯР ОИЯИ.

Академик Юрий Цолакович Оганесян

Фото: архив портала «Научная Россия» / Николай Малахин

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

Самый яркий этап научный карьеры, который принес Юрию Оганесяну наибольшую популярность и широкое общественное признание, — работа в области сверхтяжелых элементов. Именно в стенах ОИЯИ в Лаборатории ядерных реакций им. Г.Н. Флерова при участии и под руководством Юрия Цолаковича были открыты новые элементы периодической таблицы Менделеева: резерфордий (Rf), дубний (Db), сиборгий (Sg), борий (Bh), нихоний (Nh), флеровий (Fl), московий (Mc), ливерморий (Lv), теннессин (Ts) и обнаружен остров стабильности сверхтяжелых ядер. Сегодня в ЛЯР работает Фабрика сверхтяжелых элементов, где ученые готовятся к синтезу следующих элементов таблицы Менделеева. «Вся история развития науки — это познание того, как устроен окружающий нас мир, по каким законам он действует, движется, рождается или погибает где-то. И теперь мы можем сказать, что граница материального мира значительно дальше, чем мы предполагали, а следовательно, элементов может быть больше, чем думали раньше», — говорит Ю.Ц. Оганесян.

2016 г. стал важным событием для российской науки — 28 ноября Международный союз теоретической и прикладной химии (The International Union of Pure and Applied Chemistry, IUPAC) присвоил 118-му элементу таблицы Менделеева имя оганесон (Og) в честь его первооткрывателя Юрия Оганесяна. Он стал первым отечественным ученым, чьим именем при жизни назван химический элемент. Таким образом Юрий Цолакович встал в один ряд с Эйнштейном, Резерфордом и Флеровым, в честь которых были названы предыдущие именные элементы.

Четверо первооткрывателей химических элементов (слева направо): профессор Петер Армбрустер и профессор Готфрид Мюнценберг, доктор Кодзи Моримото; профессор Юрий Оганесян

Источник: Wilhelmshavener Zeitung / Бьерн Люббе

Его авторству и соавторству принадлежат больше 460 научных статей, в частности «Некоторые методы ускорения тяжелых ядер» (1969), «Перспективы исследований с помощью тяжелых ионов и развитие ускорительных установок» (1979), «Синтез и свойства сверхтяжелых ядер» (1994), «Синтез и радиоактивные свойства тяжелейших ядер» (1996), «Первые атомы острова стабильности сверхтяжелых элементов» (1999), «Реакции синтеза тяжелых ядер: краткий итог и перспективы» (2006) и др.

Сегодня Юрий Цолакович не только руководит ЛЯР, но и возглавляет Научный совет по прикладной ядерной физике и Научный совет «Релятивистская ядерная физика и физика тяжелых ионов» РАН. С 2018 г. — член Совета старейшин РАН.

Академик Юрий Оганесян на церемонии вручения Большой золотой медали им. М.В. Ломоносова

Фото: архив портала «Научная Россия» / Николай Малахин

Мировое и отечественное научные сообщества высоко ценят достижения Ю.Ц. Оганесяна. В 2019 г. за фундаментальные исследования в области взаимодействия сложных ядер и экспериментальное подтверждение гипотезы существования островов стабильности сверхтяжелых элементов он удостоился Большой золотой медали им. М.В. Ломоносова РАН; в 2020 г. за выдающийся вклад в открытие новых химических элементов Юрий Оганесян получил Демидовскую премию; в 2021 г. он стал лауреатом Международной премии ЮНЕСКО-России им. Д.И. Менделеева в области фундаментальных наук и получил звание почетного доктора Университета Марии Кюри-Склодовской. И это только часть его наград. Он также удостоен премии Ленинского комсомола и премии им. Г.Н. Флерова, Государственных премий Советского Союза и Российской Федерации, ордена «За заслуги перед Отечеством», ордена Трудового Красного Знамени, премии им. Александра фон Гумбольдта, премии им. Лизы Мейтнер Европейского физического общества, золотой медали Национальной академии наук Армении и др.

28 декабря 2017 г. в Армении была выпущена марка с портретом Юрия Цолаковича Оганесяна. Помимо портрета физика, на марке изображен символ 118-го элемента периодической таблицы Менделеева, названный в честь ученого

Источник: Armenpress / Мхитар Хачатрян

Коллектив портала «Научная Россия» от всей души поздравляет Юрия Цолаковича с юбилеем и желает ему крепкого здоровья, благополучия и новых научных достижений!

Источники

Российская академия наук. Оганесян Юрий Цолакович

Объединенный институт ядерных исследований. Академику Ю.Ц.Оганесяну — 75 лет

Wikipedia. Юрий Цолакович Оганесян

ТАСС. Юрий Цолакович Оганесян

Фото на странице: архив портала «Научная Россия»

Фото на главной странице: архив портала «Научная Россия»

Добавление и удаление нескольких классов в JavaScript для элемента DOM

Ванильный JavaScript позволяет добавлять или удалять несколько классов для элемента DOM тремя различными способами. В зависимости от ваших потребностей вы можете выбрать один из следующих вариантов:

classList property
className свойство
setAttribute метод
Бонус для переключения нескольких классов в DevTools

1. свойство classList

Element.classList — это свойство, доступное только для чтения, которое возвращает динамическую коллекцию DOMTokenList атрибутов класса элемента
.
— МДН

Свойство classList должно быть вашим основным способом работы с классами в JavaScript. Свойство classList имеет методы add() и remove() , которые позволяют передавать несколько классов в качестве аргументов.

Допустим, у нас есть кнопка с цифрой 9.0006 id значение кнопки . Чтобы добавить несколько классов, вам необходимо передать каждый класс в виде отдельного параметра в метод add . То же самое происходит, если вы хотите удалить несколько классов.

 постоянная кнопка = document.getElementById('кнопка')
button.classList.add('btn', 'btn-primary', 'btn-primary--footer')
button.classList.remove('btn', 'btn-primary', 'btn-primary--footer')

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

 константная кнопка = document.getElementById('кнопка')
const class = ['btn', 'btn-primary', 'btn-primary--footer']
button.classList.add (... классы)
button.classList.remove (... классы)

Переключение классов

С помощью свойства classList вы можете фактически переключать классы одним методом: toggle() . Метод toggle() принимает два аргумента: token и force .

Маркер представляет собой строку и представляет имя класса. Force является необязательным, если он включен, в зависимости от значения будет только добавляться или удаляться класс. Если true то только добавит, если false только удалит.

Однако обратите внимание, что аргумент токена должен быть одной строкой без пробелов. Это означает, что он может переключать одно имя класса за раз!

 постоянная кнопка = document.getElementById('кнопка')
button.addEventListener('щелчок', () => {
  button.classList.toggle('btn--active')
})

Поддержка браузером classList свойства .

2. свойство className

Свойство className интерфейса Element получает и устанавливает значение атрибута class указанного элемента.
— МДН

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

 константная кнопка = document.getElementById('кнопка')
button.className = 'btn btn-primary btn-primary--footer'
// чтобы удалить определенные классы, вам нужно переназначить
// значение свойства className
button.className = 'кнопка'

Поддержка браузером className свойства .

3. Метод setAttribute

Задает значение атрибута указанного элемента. Если атрибут уже существует, значение обновляется; в противном случае добавляется новый атрибут с указанным именем и значением.
— МДН

Хотя метод setAttribute может выглядеть не так просто, как classList , его можно использовать для добавления нескольких классов. Как и в приведенном выше методе, в одной строке можно указать несколько классов.

 постоянная кнопка = document.getElementById('кнопка')
button. setAttribute('класс', 'btn btn-primary btn-primary--footer')
// чтобы удалить определенные классы, вам нужно обновить
// значение повторным вызовом этого метода
button.setAttribute('класс', 'кнопка')

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

Поддержка браузером setAttribute метода .

4. Бонусное переключение нескольких классов в DevTools

Вы можете легко добавлять или удалять несколько классов в DevTools вашего браузера. Это работает в Chrome и Firefox:

Переключение классов в Dev Tools

Повторное использование стилей — Tailwind CSS

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

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

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

Авторы

204

+ 198 других

 
  <дел>
     Соавторы 
    204
  
  <дел>
    
    
    
    
     com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>