W3.JS Adicionar classes ao HTML

❮ Anterior Próximo ❯

Adicione uma classe:

w3.addClass(selector,'class')

Adicione várias classes:

w3.addClass(selector,'class1 class2 class3...')

Adicionar turma por ID

Adicione a classe "marked" a um elemento com id="London":

Exemplo

<button onclick="w3.addClass('#London','marked')">Add Class</button>

Adicionar turma por tag

Adicione a classe "marked" a todos os elementos <h2>:

Exemplo

<button onclick="w3.addClass('h2','marked')">Add Class</button>

Adicionar classe por classe

Adicione a classe "marcada" a um elemento com class="city":

Exemplo

<button onclick="w3.addClass('.city','marked')">Add Class</button>

Adicionar várias classes

Para adicionar várias classes a um elemento, separe cada classe com um espaço.

Adicione "class1" e "class2" a um elemento com id="London":

Exemplo

<button onclick="w3.addClass('#London','class1 class2')">Add Classes</button>

Remover classes de elementos HTML

Remover uma classe:

w3.removeClass(selector,'class')

Remova várias classes:

w3.removeClass(selector,'class1 class2 class3...')

Remover classe por ID

Remova a classe "marcada" de um elemento com id="London":

Exemplo

<button onclick="w3.removeClass('#London','marked')">Remove Class</button>

Remover classe por tag

Remova a classe "marcada" de todos os elementos <h2>:

Exemplo

<button onclick="w3.removeClass('h2','marked')">Remove Class</button>

Remover classe por classe

Remova a classe "marcada" de todos os elementos com class="city":

Exemplo

<button onclick="w3.removeClass('.city','marked')">Remove Class</button>

Remover várias classes

Para remover várias classes de um elemento, separe cada classe com um espaço.

Remova "class1" e "class2" de um elemento com id="London":

Exemplo

<button onclick="w3.removeClass('#London','class1 class2')">Remove Classes</button>

Alternar a classe de elementos HTML

Ativar/desativar uma classe:

w3.toggleClass(selector,'class')

Alternar entre duas classes:

w3.toggleClass(selector,'property','class','class')

Alternar classe por ID

Alterne entre a classe "marcada" de um elemento com id="London":

Exemplo

<button onclick="w3.toggleClass('#London','marked')">Toggle</button>

Alternar classe por tag

Alterne entre a classe "marcada" de todos os elementos <h2>:

Exemplo

<button onclick="w3.toggleClass('h2','marked')">Toggle</button>

Alternar classe por classe

Alterne entre a classe "marcada" de todos os elementos com class="city":

Exemplo

<button onclick="w3.toggleClass('.city','marked')">Toggle</button>

Alternar várias classes

Alterne entre o nome da classe "class1" e "class2" de id="London:

Exemplo

<button onclick="w3.toggleClass('#London','class1','class2')">Toggle</button>

❮ Anterior Próximo ❯