it-swarm.com.ru

Как изменить класс элемента с помощью JavaScript?

Как я могу изменить класс элемента HTML в ответ на событие onClick, используя JavaScript?

2443
Nathan Smith

Современные методы HTML5 для изменения классов

Современные браузеры добавили classList , который предоставляет методы, облегчающие манипулирование классами без использования библиотеки:

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

К сожалению, они не работают в Internet Explorer до v10, хотя есть shim , чтобы добавить поддержку для IE8 и IE9, доступную на эта страница . Тем не менее, он получает все больше и больше поддерживается .

Простое кросс-браузерное решение

Стандартный способ выбора элемента в JavaScript - это использование document.getElementById("Id") , которое используют следующие примеры - вы, конечно, можете получить элементы другими способами, а в правильной ситуации можете просто использовать вместо него this - впрочем, вдаваясь в детали на это выходит за рамки ответа.

Чтобы изменить все классы для элемента:

Чтобы заменить все существующие классы одним или несколькими новыми классами, установите атрибут className:

document.getElementById("MyElement").className = "MyClass";

(Вы можете использовать разделенный пробелами список для применения нескольких классов.)

Чтобы добавить дополнительный класс к элементу:

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

document.getElementById("MyElement").className += " MyClass";

Чтобы удалить класс из элемента:

Чтобы удалить отдельный класс для элемента, не затрагивая другие потенциальные классы, требуется простая замена регулярного выражения:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

Объяснение этого регулярного выражения следующее:

(?:^|\s) # Match the start of the string, or any single whitespace character

MyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be end of string or a space)

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

Чтобы проверить, применяется ли класс к элементу:

Тот же самый regex, использованный выше для удаления класса, может также использоваться как проверка того, существует ли определенный класс:

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )


Назначение этих действий событиям onclick:

Хотя можно писать JavaScript непосредственно внутри атрибутов событий HTML (таких как onclick="this.className+=' MyClass'"), это не рекомендуемое поведение. Особенно в больших приложениях, более поддерживаемый код достигается путем отделения разметки HTML от логики взаимодействия JavaScript.

Первым шагом к достижению этого является создание функции и вызов функции в атрибуте onclick, например:

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

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

Второй шаг - переместить событие onclick из HTML в JavaScript, например, используя addEventListener

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }

    window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>

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


Фреймворки и библиотеки JavaScript

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

Хотя некоторые люди считают излишним добавлять ~ 50 КБ фреймворка для простого изменения класса, если вы выполняете какой-либо значительный объем работы с JavaScript или что-то, что может иметь необычное поведение в разных браузерах, это стоит рассмотреть.

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

Приведенные выше примеры были воспроизведены ниже с использованием jQuery , вероятно, наиболее часто используемой библиотеки JavaScript (хотя есть и другие, которые тоже стоит изучить).

(Обратите внимание, что $ здесь является объектом jQuery.)

Изменение классов с помощью jQuery:

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

Кроме того, jQuery предоставляет ярлык для добавления класса, если он не применяется, или удаления класса, который делает:

$('#MyElement').toggleClass('MyClass');


Назначение функции событию click с помощью jQuery:

$('#MyElement').click(changeClass);

или без идентификатора:

$(':button:contains(My Button)').click(changeClass);


3517
Peter Boughton

Вы также можете просто сделать:

. .__ document.getElementById ( 'ID') classList.add ( 'класс');.. .__ document.getElementById ( 'ID') classList.remove ( 'класс');. 

И переключить класс (удалить, если существует, добавить его):

. .__ document.getElementById ( 'ID') classList.toggle ( 'класс');. 
394
Tyilo

В одном из моих старых проектов, в которых не использовался jQuery, я построил следующие функции для добавления, удаления и проверки наличия элемента:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

Так, например, если я хочу, чтобы onclick добавил некоторый класс, кнопка, я могу использовать это:

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

К настоящему времени наверняка было бы лучше использовать jQuery.

105
Andrew Orsich

Вы можете использовать node.className так:

document.getElementById('foo').className = 'bar';

Это должно работать в IE5.5 и выше в соответствии с PPK .

70
Eric Wendelin

Ух ты, удивляешься, что здесь так много ответов ...

<div class="firstClass" onclick="this.className='secondClass'">
46
Travis J

Используя чистый код JavaScript:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}
44
PseudoNinja

Это работает для меня:

function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}
31
Gopal Krishna Ranjan

Также вы можете расширить объект HTMLElement, чтобы добавить методы для добавления, удаления, переключения и проверки классов ( Gist ):

HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;

HTMLElement.prototype.addClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
      this.className = this.className.trim() + ' ' + string[i];
    }
  }
}

HTMLElement.prototype.removeClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
  }
}

HTMLElement.prototype.toggleClass = function(string) {
  if (string) {
    if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
      this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
    } else {
      this.className = this.className.trim() + ' ' + string;
    }
  }
}

HTMLElement.prototype.hasClass = function(string) {
  return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}

А затем просто используйте вот так (по клику добавит или удалит класс):

document.getElementById('yourElementId').onclick = function() {
  this.toggleClass('active');
}

Вот демо .

18
moka

Просто чтобы добавить информацию из другой популярной среды, Google Closures, посмотрите их dom/classes class:

goog.dom.classes.add(element, var_args)

goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)

goog.dom.classes.remove(element, var_args)

Одним из вариантов выбора элемента является использование goog.dom.query с селектором CSS3:

var myElement = goog.dom.query("#MyElement")[0];
15
Ben Flynn

Пара небольших заметок и изменений в предыдущих регулярных выражениях:

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

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

var s = "testing   one   four  one  two";
var cls = "one";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "test";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "testing";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "tWo";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
13
Alex Robinson

Изменить класс CSS элемента с помощью JavaScript в ASP.NET :

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
        lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
    End If
End Sub
12
Hiren Kansara

Я хотел бы использовать jQuery и написать что-то вроде этого:

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

Этот код добавляет функцию, вызываемую при нажатии на элемент id some-element . Функция добавляет clicked к атрибуту класса элемента, если он еще не является его частью, и удаляет его, если он там есть.

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

Спасибо

11
shingokko

Линия

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')

должно быть:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');
9
Eric Bailey

Вот моя версия, полностью работающая:

function addHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    obj.className += " " + classname
}

function removeHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    var classes = ""+obj.className
    while (classes.indexOf(classname)>-1) {
        classes = classes.replace (classname, "")
    }
    obj.className = classes
}

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

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >
7
alfred

Вот toggleClass для переключения/добавления/удаления класса в элементе:

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
    var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
    var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));

    elem.className=elem.className.replace(matchRegExp, ''); // clear all
    if (add) elem.className += ' ' + theClass;
}

см. jsfiddle

также см. мой ответ здесь для динамического создания нового класса

7
kofifus

Изменить класс элемента в Vanilla JavaScript с поддержкой IE6

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

function getClassNode(element) {
  for (var i = element.attributes.length; i--;)
    if (element.attributes[i].nodeName === 'class')
      return element.attributes[i];
}

function removeClass(classNode, className) {
  var index, classList = classNode.value.split(' ');
  if ((index = classList.indexOf(className)) > -1) {
    classList.splice(index, 1);
    classNode.value = classList.join(' ');
  }
}

function hasClass(classNode, className) {
  return classNode.value.indexOf(className) > -1;
}

function addClass(classNode, className) {
  if (!hasClass(classNode, className))
    classNode.value += ' ' + className;
}

document.getElementById('message').addEventListener('click', function() {
  var classNode = getClassNode(this);
  var className = hasClass(classNode, 'red') && 'blue' || 'red';

  removeClass(classNode, 'red');
  removeClass(classNode, 'blue');

  addClass(classNode, className);
})
.red {
  color: red;
}
.red:before {
  content: 'I am red! ';
}
.red:after {
  content: ' again';
}
.blue {
  color: blue;
}
.blue:before {
  content: 'I am blue! '
}
<span id="message" class="">Click me</span>

6
Eugene Tiurin

Я использую следующие функции JavaScript Vanilla в моем коде. Они используют регулярные выражения и indexOf, но не требуют заключения в кавычки специальных символов в регулярных выражениях.

function addClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) < 0) {
        el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

function delClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) >= 0) {
        el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

Вы также можете использовать element.classList в современных браузерах.

5
Salman A

classList DOM API:

Очень удобным способом добавления и удаления классов является DOM API classList. Этот API позволяет нам выбирать все классы определенного элемента DOM, чтобы изменить список с помощью JavaScript. Например:

const el = document.getElementById("main");
console.log(el.classList);
<div class="content wrapper animated" id="main"></div>

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

Пример:

const el = document.getElementById('container');


function addClass () {
   el.classList.add('newclass');
}


function replaceClass () {
     el.classList.replace('foo', 'newFoo');
}


function removeClass () {
       el.classList.remove('bar');
}
button{
  margin: 20px;
}

.foo{
  color: red;
}

.newFoo {
  color: blue;
}

.bar{
  background-color:powderblue;
}

.newclass{
  border: 2px solid green;
}
<div class="foo bar" id="container">
  "Sed ut perspiciatis unde omnis 
  iste natus error sit voluptatem accusantium doloremque laudantium, 
  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et 
  quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
  voluptatem quia voluptas 
 </div>
  
<button onclick="addClass()">AddClass</button>
  
<button onclick="replaceClass()">ReplaceClass</button>
  
<button onclick="removeClass()">removeClass</button>
  

0
Willem van der Veen

Хорошо, я думаю, что в этом случае вы должны использовать jQuery или написать свои собственные методы на чистом javascript, я предпочитаю добавлять свои собственные методы, а не вставлять все jQuery в мое приложение, если мне это не нужно по другим причинам.

Я хотел бы сделать что-то похожее на приведенное ниже в качестве методов в моей инфраструктуре javascript, чтобы добавить несколько функций, которые обрабатывают добавление классов, удаление классов и т.д., Аналогично jQuery, это полностью поддерживается в IE9 +, также мой код написан на ES6, поэтому вам нужно чтобы убедиться, что ваш браузер поддерживает его или вы используете что-то вроде babel, в противном случае необходимо использовать синтаксис ES5 в вашем коде, также таким образом мы находим элемент через идентификатор, что означает, что элемент должен иметь идентификатор, который будет выбран:

//simple javascript utils for class management in ES6
var classUtil = {

  addClass: (id, cl) => {
    document.getElementById(id).classList.add(cl);
  },

  removeClass: (id, cl) => {
    document.getElementById(id).classList.remove(cl);
  },

  hasClass: (id, cl) => {
    return document.getElementById(id).classList.contains(cl);
  },

  toggleClass: (id, cl) => {
    document.getElementById(id).classList.toggle(cl);
  }

}

и вы можете просто вызвать использование их, как показано ниже, представьте, что ваш элемент имеет идентификатор «id» и класс «class», убедитесь, что вы передаете их как строку, вы можете использовать утилиту, как показано ниже:

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');
0
Alireza

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

const tabs=document.querySelectorAll('.menu li');

for(let tab of tabs){
  
  tab.onclick=function(){
    
  let activetab=document.querySelectorAll('li.active');
    
  activetab[0].classList.remove('active')
  
    tab.classList.add('active'); 
  }
  
}
body {
    padding:20px;
    font-family:sans-serif;    
}

ul {
    margin:20px 0;
    list-style:none;
}

li {
    background:#dfdfdf;
    padding:10px;
    margin:6px 0;
    cursor:pointer;
}

li.active {
    background:#2794c7;
    font-weight:bold;
    color:#ffffff;
}
<i>Please click an item:</i>

<ul class="menu">
  <li class="active"><span>Three</span></li>
  <li><span>Two</span></li>
  <li><span>One</span></li>
</ul>

0
Danish Khan

Просто думал, что я добавлю это:

function inArray(val, ary){
  for(var i=0,l=ary.length; i<l; i++){
    if(ary[i] === val){
      return true;
    }
  }
  return false;
}
function removeClassName(classNameS, fromElement){
  var x = classNameS.split(/\s/), s = fromElement.className.split(/\s/), r = [];
  for(var i=0,l=s.length; i<l; i++){
    if(!iA(s[i], x))r.Push(s[i]);
  }
  fromElement.className = r.join(' ');
}
function addClassName(classNameS, toElement){
  var s = toElement.className.split(/\s/);
  s.Push(c); toElement.className = s.join(' ');
}
0
PHPglue

просто скажите myElement.classList="new-class", если вам не нужно поддерживать другие существующие классы, в этом случае вы можете использовать методы classList.add, .remove.

var doc = document;
var divOne = doc.getElementById("one");
var goButton = doc.getElementById("go");

goButton.addEventListener("click", function() {
  divOne.classList="blue";
});
div{
  min-height:48px;
  min-width:48px;
}
.bordered{
  border: 1px solid black;
}
.green{
  background:green;
}
.blue{
  background: blue;
}
<button id="go">Change Class</button>

<div id="one" class="bordered green">

</div>

0
Ron Royston

пытаться

function change(el) { el.className='second' }
.first { width: 50px; height: 50px; background: blue }
.second { width: 150px; height: 150px; background: red; transition: all 0.3s ease-in }
<button  onclick="change(box)">Click me</button>
<div id="box" class="first"></div>
0
Kamil Kiełczewski

Много ответов, много хороших ответов.

TL; DR:

document.getElementById('id').className = 'class'

ИЛИ ЖЕ

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

Это оно.

И, если вы действительно хотите знать, почему и обучать себя, тогда я предлагаю прочитать ответ Питера Боутона, это прекрасно:
https://stackoverflow.com/a/196038/1804013

Заметка;
Это возможно с помощью (document или event):

  • getElementById ()
  • getElementsByClassName ()
  • querySelector ()
  • querySelectorAll ()
0
tfont