---
title: element.setAttribute
slug: Web/API/Element/setAttribute
tags:
  - DOM
  - DOM Element Methods
  - Gecko
  - Gecko DOM Reference
translation_of: Web/API/Element/setAttribute
---
<div>
 {{ApiRef}}</div>
<h2 id="Summary" name="Summary">概要</h2>
<p>指定の要素に新しい属性を追加します。または指定の要素に存在する属性の値を変更します。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox"><i>element</i>.setAttribute(<i>name</i>,<i>value</i>);
</pre>
<ul>
 <li><code>name</code> は属性の名前を文字列で表現したものです。</li>
 <li><code>value</code> は属性の希望する新しい値です。</li>
</ul>
<h2 id="Example" name="Example">例</h2>
<pre class="brush:js">var d = document.getElementById("d1");

d.setAttribute("align", "center");</pre>
<h2 id="Notes" name="Notes">注記</h2>
<p>指定の属性が既に存在しているときはその属性の値はこの関数に渡された値に変更されます。もし存在しなければ属性は新しく作成されます。</p>
<p><code><a href="/ja/docs/DOM/element.getAttribute">getAttribute()</a></code> は存在しない属性に対し <code>null</code> を返しますが、属性を取り除く為には <code>
 <i>
  elt</i>
 .setAttribute(
 <i>
  attr</i>
 , null)</code> を使うのではなく、<code><a href="/ja/docs/DOM/element.removeAttribute">removeAttribute()</a></code> を使用するべきです。</p>
<p><code>setAttribute()</code> を使ってある属性、XUL や HTML の特別な値、および HTML の選択領域の変更は、属性がデフォルト値を特定している場合に一貫性の無い動作となります。現在の値にアクセスしたり、変更したりするにはプロパティを使用すべきです。具体例として、 <code>
 <i>
  elt</i>
 .setAttribute('value',
 <i>
  val</i>
 )</code> の代わりに <code>
 <i>
  elt</i>
 .value</code> を使用します。</p>
<div>
 {{DOMAttributeMethods}}</div>
<h2 id="Specification" name="Specification">仕様</h2>
<ul>
 <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core: setAttribute</a> (introduced in <a 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>