1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
---
title: Element.setAttribute()
slug: Web/API/Element/setAttribute
tags:
- Elemento
- IPA
- MOD
- Referencia
- metodo
translation_of: Web/API/Element/setAttribute
---
<p>{{APIRef("DOM")}}</p>
<p>Adiciona um novo atributo ou modifica o valor de um atributo existente num elemento específico.</p>
<h2 id="Syntax" name="Syntax">Sintaxe</h2>
<pre class="syntaxbox"><em>element</em>.setAttribute(<em>name</em>, <em>value</em>);
</pre>
<ul>
<li><font face="Consolas, Liberation Mono, Courier, monospace"><code>name</code> é o nome do atributo como string.</font></li>
<li><code>value</code> é o novo valor desejado do atributo</li>
</ul>
<h2 id="Example" name="Example">Exemplo</h2>
<p>No seguinte exemplo, <code>setAttribute()</code> é usado para definir o atributo {{htmlattrxref("disabled")}} em {{htmlelement("button")}}, desabilitado-o.</p>
<pre class="brush: html"><button>Hello World</button></pre>
<pre class="brush:js">var b = document.querySelector("button");
b.setAttribute("disabled", "disabled");
</pre>
<p>{{ EmbedLiveSample('Example', '300', '50', '', 'Web/API/Element/setAttribute') }}</p>
<h2 id="Notes" name="Notes">Notas</h2>
<p>Quando chamado em um documento HTML, <code>setAttribute</code> lower-cases its attribute name argument.</p>
<p>Se um atributo especificado já existe, então o valor do atributo é mudado para o valor passado para a função. Se não existe, então o atributo é criado.</p>
<p>Apesar de <code><a href="/en-US/docs/DOM/element.getAttribute" title="DOM/element.getAttribute">getAttribute()</a></code> retornar <code>null</code> para atributos ausentes, você precisa usar <code><a href="/en-US/docs/DOM/element.removeAttribute" title="DOM/element.removeAttribute">removeAttribute()</a></code> ao invés de <code><em>elt</em>.setAttribute(<em>attr</em>, null)</code> para remover o atributo. Este último forçará o valor <code>null</code> para a string <code>"null"</code>, o que não é provavelmente o que você quer.</p>
<p>Usar <code>setAttribute()</code> para modificar certos atributos, mais notavelmente valor em XUL, funciona inconsistentemente, como atributos específicos de valor padrão. Para acessar ou modificar os valores atuais, você deve usar as propriedades. Por exemplo, use <code><em>elt</em>.value</code> ao invés de <code><em>elt</em>.setAttribute('value', <em>val</em>)</code>.</p>
<p>Para definir um atributo que não leva valor, assim como o atributo <code>autoplay</code> de um elemento {{HTMLElement("audio")}}, use <code>null</code> ou um valor vazio. Por exemplo: <code><em>elt</em>.setAttribute('autoplay', '')</code></p>
<div>{{DOMAttributeMethods}}</div>
<h2 id="Specification" name="Specification">Especificação</h2>
<ul>
<li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core: setAttribute</a> (introduzido em <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">DOM Level 1 Core</a>)</li>
<li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5: APIs in HTML documents</a></li>
</ul>
|
