w3schools - Alterar a classe de um elemento com JavaScript




js add class to html element (17)

Alterar a classe de um elemento no JavaScript vanilla com suporte ao IE6

Você pode tentar usar a propriedade de attributes nó para manter a compatibilidade com navegadores antigos, mesmo o 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>

https://code.i-harness.com

Como posso alterar uma classe de um elemento HTML em resposta a um evento onClick usando JavaScript?


API DOM do classList :

Uma maneira muito conveniente de adicionar e remover classes é a API DOM classList . Esta API nos permite selecionar todas as classes de um elemento DOM específico para modificar a lista usando javascript. Por exemplo:

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

Podemos observar no log que estamos recuperando um objeto com não apenas as classes do elemento, mas também muitos métodos e propriedades auxiliares. Esse objeto é herdado da interface DOMTokenList , uma interface usada no DOM para representar um conjunto de tokens separados por espaços (como classes).

Exemplo:

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>
  


A linha

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

deveria estar:

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

Algumas pequenas notas e ajustes nas regexes anteriores:

Você desejará fazer isso globalmente, caso a lista de turmas tenha o nome da turma mais de uma vez. E provavelmente você vai querer despir os espaços das extremidades da lista de classes e converter vários espaços em um espaço para evitar a execução de espaços. Nenhuma dessas coisas deve ser um problema se o único código que estiver sendo usado com os nomes das classes usar a regex abaixo e remover um nome antes de adicioná-lo. Mas. Bem, quem sabe quem pode estar pensando na lista de nomes de classe.

Essa regex não faz distinção entre maiúsculas e minúsculas, de modo que os erros nos nomes das classes possam aparecer antes que o código seja usado em um navegador que não se importa com os nomes das classes.

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, ' ') + "]");

Apenas para adicionar informações de outro framework popular, o Google Closures, veja sua classe dom/classes :

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

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

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

Uma opção para selecionar o elemento é usando goog.dom.query com um seletor CSS3:

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

Apenas pensei em jogar isso em:

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(' ');
}

Aqui está o código jQuery simples para fazer isso.

$(".class1").click(function(argument) {
    $(".parentclass").removeClass("classtoremove");
    setTimeout(function (argument) {
        $(".parentclass").addClass("classtoadd");
    }, 100);
});

Aqui,

  • Class1 é um ouvinte de um evento.
  • A classe pai é a classe que hospeda a classe que você deseja alterar
  • Classtoremove é a velha classe que você tem.
  • A classe a adicionar é a nova classe que você deseja adicionar.
  • 100 é o tempo limite durante o qual a classe é alterada.

Boa sorte.


Aqui está um toggleClass para alternar / adicionar / remover uma classe em um elemento:

// 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;
}

ver jsfiddle

veja também minha resposta here para criar uma nova classe dinamicamente


Em um dos meus projetos antigos que não usavam o jQuery, criei as seguintes funções para adicionar, remover e verificar se element tem classe:

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, ' ');
    }
}

Então, por exemplo, se eu quiser onclick para adicionar alguma classe no botão eu posso usar isso:

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

Agora, com certeza, seria melhor usar o jQuery.


Eu usaria o jQuery e escreveria algo assim:

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

Este código adiciona uma função a ser chamada quando um elemento do id some-element é clicado. A função anexa clicado ao atributo de classe do elemento, se ainda não fizer parte dele, e o remove se estiver lá.

Sim, você precisa adicionar uma referência à biblioteca jQuery em sua página para usar esse código, mas pelo menos você pode se sentir confiante de que a maioria das funções na biblioteca funcionaria em praticamente todos os navegadores modernos, e economizará tempo para implementar seu próprio código para fazer o mesmo.

obrigado


Isso é mais fácil com uma biblioteca como jQuery:

<input type="button" onClick="javascript:test_byid();" value="id='second'" />

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>

Isso está funcionando para mim:

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

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}

Sem ofensa, mas não é inteligente alterar a classe on-the-fly, pois força o interpretador CSS a recalcular a apresentação visual de toda a página da web.

A razão é que é quase impossível para o intérprete CSS saber se alguma herança ou cascata pode ser alterada, portanto, a resposta curta é:

Nunca mude o className on-the-fly! -)

Mas normalmente você só precisa alterar uma propriedade ou duas, e isso é facilmente implementado:

function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}

Uau, surpreso, há tantas respostas exageradas aqui ...

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

Você pode usar node.className assim:

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

Isso deve funcionar no IE5.5 e acima de acordo com o PPK .


Você também pode estender o objeto HTMLElement, para adicionar métodos para adicionar, remover, alternar e checar classes ( 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);
}

E então é só usar assim (no clique irá adicionar ou remover a classe):

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

Aqui está uma demo .


apenas diga myElement.classList="new-class" menos que você precise manter outras classes existentes. classList.add, .remove caso, você pode usar os métodos 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>







dom