Как добавлять класс к div используя язык сценариев JavaScript?

Нуждалась в том, чтобы добавить следующий признак bootstrap (капуста - md-6) к div, который по умолчанию печатается уже с существующим классом:

<div class="images" style="opacity: 1;">

Вы скажете, что он это сделал прямо, но это шаблон PHP, что я еще не нахожу ее и устал от того, что искал ее между пакетом. Следовательно я стремлюсь того, чтобы остался следующего способа посредством последовательности язык сценариев JavaScript.

<div class="col-md-6 images" style="opacity: 1;">
11
задан 05.03.2019, 00:56
4 ответа

Иметь в виду, что то, что у тебя есть, одна clase и не один id для того, чтобы он идентифицировал в твой элемент, он возвратит договоренность, сделав getElementsByClassName поэтому использование for.

  • С чистым языком сценариев JavaScript (Без Книжных магазинов, ни frameworks) посредством className это свойство возвратит цепь с классами отборного элемента, чтобы добавлять определенный класс к элементу, смоги добавлять, что имя класса для этого могло бы использовать основной синтаксис связывания цепей + =, (он будет должен иметь в виду, что нужно добавочное место, если бы он закончил не классы вместе).

    var elemento = document.getElementsByClassName("images");
    for(var i = 0; i < elemento.length; i++)
        elemento[i].className += " col-md-6";
    

Да у Вашего элемента был идентификатор (id) он имел бы прямую форму

    var elemento = document.getElementById("images");
    elemento.className += " col-md-6";
  • Посредством Jquery, он использовал бы addClass, чтобы добавлять имя класса к определенному элементу HTML

    $('.images').addClass('col-md-6');
    
  • Также смоги добавлять классы используя свойство classList, это свойство содержит самые важные следующие методы.

    1. Добавлять класс или более 1 класса

      myElemento.classList.add('nombreclase');
      myElemento.classList.add('nombreclase1','nombreclase2');
      
    2. Удалять класс или более 1 класса

      myElemento.classList.remove('nombreclase');
      myElemento.classList.remove('nombreclase1','nombreclase2');
      
    3. Проверять, содержит ли элемент класс

      myElemento.classList.contains('nombreclase');
      
15
ответ дан 03.12.2019, 19:54
  • 1
    Вклад был очень хорошим оно я функционировало. Сейчас это помогать и # 233;. – Maestro.Web 15.10.2016, 10:52
  • 2
    @Dev. Джоэл, превосходный ответ, я функционирует! – C47 27.03.2019, 22:16

Свойство объектов HTML , которые определяют класс, className, это тип string .
могут изменять прямо, для aГ±adir другой класс, просто aГ±ade текст используя obj.className+=" nombre"; (Он оставляет место раньше как и это harГ-схвати в HTML ).
CГіdigo примера:

caja.className+=" rojo";
#caja {position:fixed;width:100px;height:100px;}
.rojo { background-color:red;}
.borde {border: 3px solid black;}
<div id="caja" class="borde"></div>
0
ответ дан 03.12.2019, 19:54

Для управления классов элемента в javascript, я рекомендую тебе использовать объект classList который предоставляет методы, чтобы добавлять, удалять и проверять, присутствует ли элемент в списке классов.

Версия jQuery

const $el = $('.selector');
$selector.hasClass('someClass');
$selector.addClass('newClass');
$selector.removeClass('otherClass');

Версия без jQuery

const el = document.querySelector('.selector');
el.classList.contains('someClass');
el.classList.add('newClass');
el.classList.remove('otherClass');

Я рекомендую тебе всегда стараться писать код без jQuery.

Я присоединяю ссылку в classList для того, чтобы ты смог видеть больше в детали Ваше поведение.

Снабди ссылками: http://www.w3schools.com/jsref/prop_element_classlist.asp

4
ответ дан 03.12.2019, 19:54
  • 1
    Я не соглашаюсь с, который было нужно предотвращать jQuery, это librerí в очень закончено и искренне он мне кажется очень ú til. – lromeraj 18.04.2017, 23:07
  • 2
    Никто не обсуждает, что это не была librerí в ú til, но я верю в то, что делать тебя зависимым от framework или librerí в es хорошая одна prá ctica, состоя в том, что существуют способы равно или má s работоспособные делания их используя vanilla js. :) – Marcelo Fuentes 20.04.2017, 00:11
  • 3
    зависимость frameworks? Mé tete в pá gina, что был и verá s, что не только используют один, если не некоторые, я не говорю, что не было возможно делать только с JS, но предотвращать librerí в который тебя упрощает работа..... . Когда ты сделаешь проект в большое ты dará s счет, которого она не является такой плохой prá ctica как ты веришь..... – lromeraj 20.04.2017, 08:22

Решение для современных браузеров.

Возможно делать то же самое, что и ответ @Dev. Джоэл, но используя classList.

В отличие от className, в этом методе не необходимо прилагать существующие классы с той, что ты хочешь добавить.

Он используется так:

var elemento = document.querySelectorAll(".images");
for (var i = 0; i < elemento.length; i++) {
  elemento[i].classList.add("clase-agregada");
}

Также мы используем querySelectorAll (), но хорошо ты можешь продолжать использовать getElementsByClassName чтобы получать список узлов.


ФРАГМЕНТ КОДА:

var elemento = document.querySelectorAll(".images");
for (var i = 0; i < elemento.length; i++) {
  elemento[i].classList.add("clase-agregada");
}
.images {
  width: 50px;
  height: 50px;
  background-color: tomato;
}
.clase-agregada {
  border: 3px solid chartreuse;
}
<div class="images" style="opacity: 1;">

jsFiddle


Если ты хочешь добавить более одного класса используя этот метод, ты должен отделять каждую из-за commas.

var elemento = document.querySelectorAll(".images");
for (var i = 0; i < elemento.length; i++) {
  elemento[i].classList.add("clase-uno", "clase-dos", "clase-tres");
}
.images {
  width: 50px;
  height: 50px;
  background-color: tomato;
}
.clase-uno {
  border: 3px solid chartreuse;
}
.clase-dos {
  transform: rotateZ(45deg);
  transform-origin: center bottom;
}
.clase-tres {
  outline: 3px solid dodgerblue;
}
<div class="images" style="opacity: 1;">

Ты можешь проверять браузеры, которые выносят этот метод здесь.

2
ответ дан 03.12.2019, 19:54