From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/api/element/classlist/index.html | 171 +++++++++++++++++++++++ 1 file changed, 171 insertions(+) create mode 100644 files/pt-br/web/api/element/classlist/index.html (limited to 'files/pt-br/web/api/element/classlist') diff --git a/files/pt-br/web/api/element/classlist/index.html b/files/pt-br/web/api/element/classlist/index.html new file mode 100644 index 0000000000..03b79e63d5 --- /dev/null +++ b/files/pt-br/web/api/element/classlist/index.html @@ -0,0 +1,171 @@ +--- +title: Element.classList +slug: Web/API/Element/classList +translation_of: Web/API/Element/classList +--- +
{{APIRef("DOM")}}
+ +

O Element.classList é uma propriedade somente leitura que retorna uma coleção {{domxref ("DOMTokenList")}} ativa dos atributos de classe do elemento.

+ +

Usar classList é uma alternativa conveniente para acessar a lista de classes de um elemento como uma seqüência delimitada por espaço através de {{domxref ("element.className")}}.

+ +

Sintaxe

+ +
const elementClasses = elementNodeReference.classList;
+
+ +

elementClasses é um DOMTokenList que representa o atributo de classe de elementNodeReference. Se o atributo de classe não foi definido ou está vazio elementClasses.length retorna 0. element.classList propriamente dito é somente leitura, embora você possa modificá-lo usando os métodos add () e remove ().

+ +

Métodos

+ +
+
add( String [, String] )
+
Adicione valores de classe especificados. Se essas classes já existem no atributo do elemento, elas são ignoradas.
+
remove( String [,String] )
+
Remover valores de classe específicos.
+
item ( Number )
+
Retorna o valor da classe por índice na coleção.
+
toggle ( String [, force] )
+
Quando apenas um argumento está presente: Toggle class value; Ou seja, se a classe existir, em seguida, removê-lo e retornar false, se não, então adicioná-lo e retornar true.
+ Quando um segundo argumento está presente: Se o segundo argumento é avaliado como true, adicione o valor especificado da classe e, se ele for avaliado como false, remova-o.
+
contains( String )
+
Verifica se o valor da classe especificado existe no atributo de classe do elemento.
+
+ +

Exemplos

+ +
// div é uma referência de objeto para um elemento <div> com class = "foo bar"
+div.classList.remove("foo");
+div.classList.add("anotherclass");
+
+// Se estiver visível, remova-o, caso contrário, adicione-o
+div.classList.toggle("visible");
+
+// adicionar/remover, dependendo do teste condicional, i menos de 10
+div.classList.toggle("visible", i < 10 );
+
+alert(div.classList.contains("foo"));
+
+// adicionar ou remover várias classes
+div.classList.add("foo","bar");
+div.classList.remove("foo", "bar");
+ +
+

As versões do Firefox antes de 26 não implementam o uso de vários argumentos nos métodos add / remove / toggle. Veja https://bugzilla.mozilla.org/show_bug.cgi?id=814014

+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentário
{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}{{Spec2("HTML WHATWG")}}Observe dentro da especificação HTML relacionada ao {{htmlattrxref("class")}} attribute.
{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM WHATWG")}}Definição inicial
{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM4")}} 
+ +

Compatibilidade do navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support8.0{{CompatVersionUnknown}}[3]{{CompatGeckoDesktop("1.9.2")}}10[1][3]11.505.1
toggle method's second argument24{{CompatVersionUnknown}}{{CompatGeckoDesktop("24")}}{{CompatNo}}[2]155.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support3.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.2")}}1011.105.0
toggle method's second argument{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("24")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Não suportado para elementos SVG. Veja a report at Microsoft about that.
+ [2] O Internet Explorer nunca implementou isso. Veja a report at Microsoft about that.
+ [3] Internet Explorer usa apenas o primeiro parâmetro em "add" e "remove".

+ +

 

+ +

 

+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf