javascript w3schools no - Alterar a classe de um elemento com JavaScript




13 Answers

Técnicas modernas de HTML5 para mudar classes

Os navegadores modernos adicionaram o classList que fornece métodos para facilitar a manipulação de classes sem precisar de uma biblioteca:

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

Infelizmente, eles não funcionam no Internet Explorer antes da v10, embora haja um shim para adicionar suporte a ele no IE8 e no IE9, disponíveis classList . É, no entanto, cada vez mais supported .

Solução simples entre navegadores

A maneira padrão de JavaScript para selecionar um elemento é usar document.getElementById("Id") , que é o que os exemplos a seguir usam - você pode, é claro, obter elementos de outras formas, e na situação certa pode simplesmente usar this - entrar em detalhes sobre isso está além do escopo da resposta.

Para alterar todas as classes de um elemento:

Para substituir todas as classes existentes por uma ou mais novas classes, configure o atributo className:

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

(Você pode usar uma lista delimitada por espaço para aplicar várias classes.)

Para adicionar uma classe adicional a um elemento:

Para adicionar uma classe a um elemento, sem remover / afetar os valores existentes, anexe um espaço e o novo nome da classe, da seguinte forma:

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

Para remover uma classe de um elemento:

Para remover uma única classe de um elemento, sem afetar outras classes em potencial, é necessária uma simples substituição de expressão regular:

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

Uma explicação desse regex é a seguinte:

(?:^|\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)

O sinalizador g informa a substituição para repetir conforme necessário, caso o nome da classe tenha sido adicionado várias vezes.

Para verificar se uma turma já está aplicada a um elemento:

O mesmo regex usado acima para remover uma classe também pode ser usado para verificar se existe uma classe em particular:

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


Atribuindo estas ações a eventos onclick:

Embora seja possível escrever JavaScript diretamente dentro dos atributos do evento HTML (como onclick="this.className+=' MyClass'" ), esse comportamento não é recomendado. Especialmente em aplicativos maiores, um código mais sustentável é obtido pela separação da marcação HTML da lógica de interação JavaScript.

O primeiro passo para isso é criar uma função e chamar a função no atributo onclick, por exemplo:

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

(Não é necessário ter esse código em tags de script, isso é simplesmente por brevidade de exemplo, e incluir o JavaScript em um arquivo distinto pode ser mais apropriado.)

A segunda etapa é mover o evento onclick para fora do HTML e para o JavaScript, por exemplo, usando 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>

(Observe que a parte window.onload é necessária para que o conteúdo dessa função seja executado após o carregamento do HTML - sem isso, o MyElement pode não existir quando o código JavaScript é chamado, de modo que a linha falhará.)


Frameworks JavaScript e bibliotecas

O código acima é todo em JavaScript padrão, no entanto, é prática comum usar um framework ou uma biblioteca para simplificar tarefas comuns, bem como se beneficiar de bugs fixos e casos de borda que você pode não pensar ao escrever seu código.

Embora algumas pessoas considerem um exagero adicionar uma estrutura de ~ 50 KB para simplesmente alterar uma classe, se você estiver fazendo uma quantidade substancial de trabalho com JavaScript ou qualquer coisa que possa ter comportamento incomum entre navegadores, vale a pena considerá-la.

(Mais ou menos, uma biblioteca é um conjunto de ferramentas projetadas para uma tarefa específica, enquanto uma estrutura geralmente contém várias bibliotecas e executa um conjunto completo de tarefas.)

Os exemplos acima foram reproduzidos abaixo usando jQuery , provavelmente a biblioteca JavaScript mais usada (embora haja outros que valham a pena investigar também).

(Observe que $ aqui é o objeto jQuery.)

Mudando Classes com jQuery:

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

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

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

Além disso, o jQuery fornece um atalho para adicionar uma classe, se ela não se aplicar, ou remover uma classe que:

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


Atribuindo uma função a um evento click com jQuery:

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

ou, sem precisar de um id:

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


name html

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




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.




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

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



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");
}



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];



Altere a classe CSS de um elemento com JavaScript no 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



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



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




Eu uso as seguintes funções JavaScript vanilla no meu código. Eles usam expressões regulares e indexOf mas não exigem a inserção de caracteres especiais em expressões regulares.

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

Você também pode usar element.classList em navegadores modernos.




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>




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>
  




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.




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



Related