recursal/MDN huggingface dataset:
Node: lookupNamespaceURI() メソッド
===============================

**`lookupNamespaceURI()`** は `Node` インターフェイスのメソッドで、引数として接頭辞を受け取り、このノードに関連付けられた名前空間が見つかれば、その URI を返します（見つからなければ `null` を返します）。

構文
--


```js
lookupNamespaceURI(prefix)
```

### 引数

`prefix`

検索する接頭辞です。

**メモ:** この引数は省略可能ではありませんが、 `null` に設定することはできます。

### 返値

 指定された接頭辞に対応する名前空間 URI の入った文字列です。
 接頭辞が見つからない場合、 `null` を返します。
 要求された `prefix` が `null` である場合は、既定の名前空間 URI を返します。

例
-


```html
Namespace URL for <code>xlink</code> on &lt;output&gt;:
<output>未検査</output>.<br />
Namespace URL for <code>xml</code> on &lt;output&gt;:
<output>未検査</output>.<br />
Namespace URL for <code>html</code> on &lt;output&gt;:
<output>未検査</output>.<br />
Namespace URL for <code>``</code> on &lt;output&gt;:
<output>未検査</output>.<br />
Namespace URL for <code>svg</code> on &lt;svg&gt;:
<output>未検査</output>.<br />
Namespace URL for <code>xlink</code> on &lt;svg&gt;:
<output>未検査</output>.<br />
Namespace URL for <code>xml</code> on &lt;svg&gt;:
<output>未検査</output>.<br />
<svg xmlns:svg="http://www.w3.org/2000/svg" height="1"></svg>
<button>ここをクリックして結果を確認</button>
```



```js
const button = document.querySelector("button");
button.addEventListener("click", () => {
  const aHtmlElt = document.querySelector("output");
  const aSvgElt = document.querySelector("svg");

  const result = document.getElementsByTagName("output");
  result[0].value = aHtmlElt.lookupNamespaceURI("xlink");
  result[1].value = aHtmlElt.lookupNamespaceURI("xml");
  result[2].value = aHtmlElt.lookupNamespaceURI("html");
  result[3].value = aHtmlElt.lookupNamespaceURI("");
  result[4].value = aSvgElt.lookupNamespaceURI("svg");
  result[5].value = aSvgElt.lookupNamespaceURI("xlink");
  result[6].value = aSvgElt.lookupNamespaceURI("xml");
});
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-node-lookupnamespaceuri |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Node.lookupPrefix`
* `Node.isDefaultNameSpace`
location: assign() メソッド
=======================

**`Location.assign()`** メソッドは、指定された URL の文書をウィンドウに読み込んで表示します。移動した後、ユーザーは「戻る」ボタンを押すことによって `Location.assign()` を呼び出したページに戻ることができます。

セキュリティ違反のために代入ができない場合は、 `DOMException` が `SECURITY_ERROR` 型で発生します。これは、メソッドを呼び出すスクリプトのオリジンが、 `Location` オブジェクトによって元々記述されていたページのオリジンと異なる場合に起こります。主に、スクリプトが異なるドメインでホストされている場合に起こります。

指定された URL が有効でない場合、 `DOMException` が `SYNTAX_ERROR` 型で発生します。

構文
--


```js
assign(url)
```

### 引数

`url`

文字列で、移動先のページの URL です。

### 返値

なし (`undefined`)。

例
-


```js
// Location.reload の記事へ移動
window.location.assign(
  "https://developer.mozilla.org/ja/docs/Web/API/Location/reload",
);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-location-assign-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 所属先の `Location` インターフェイス
* 同様のメソッド: `Location.replace()` および `Location.reload()`
location: hostname プロパティ
========================

**`hostname`** は `Location` インターフェイスのプロパティで、URL のドメインが入った文字列です。

値
-

文字列です。

例
-


```js
const anchor = document.createElement("a");
anchor.href = "https://developer.mozilla.org:4097/ja/docs/Location.hostname";

console.log(anchor.hostname); // developer.mozilla.org
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-location-hostname-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
location: host プロパティ
====================

**`host`** は `Location` インターフェイスのプロパティで、ホスト、すなわち*ホスト名*と、 URL の*ポート番号*が空でなければ、 `':'` およびその*ポート番号*の入った文字列です。

値
-

文字列です。

例
-


```js
const anchor = document.createElement("a");

anchor.href = "https://developer.mozilla.org/en-US/Location.host";
console.log(anchor.host === "developer.mozilla.org");

anchor.href = "https://developer.mozilla.org:443/en-US/Location.host";
console.log(anchor.host === "developer.mozilla.org");
// 443 はこのスキームの既定のポートなので含まれない

anchor.href = "https://developer.mozilla.org:4097/en-US/Location.host";
console.log(anchor.host === "developer.mozilla.org:4097");
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-location-host-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
location: port プロパティ
====================

**`port`** は `Location` インターフェイスのプロパティで、URL のポート番号が入った文字列です。URL に明示的にポート番号が指定されていない場合は、`''` に設定されます。

値
-

文字列です。

例
-


```js
// 文書内に <a id="myAnchor" href="/ja/docs/Location.search?q=123"> 要素があるとする
const anchor = document.getElementByID("myAnchor");
const result = anchor.port; // Returns:'443'
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-location-port-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
location: reload() メソッド
=======================

**`location.reload()`** メソッドは、再読み込みボタンのように現在の URL を再読み込みします。

再読み込みはブロックされ、 `SECURITY_ERROR` の `DOMException` が発生する可能性があります。これは、 `location.reload()` を呼び出すスクリプトのオリジンが、 `Location` オブジェクトを保持するページのオリジンと異なる場合に発生します。詳細については、同一オリジンポリシーを参照してください。

構文
--


```js
reload()
```

### 引数

なし。

**メモ:** Firefox は標準外の論理値の `forceGet` 引数 を `location.reload()` で対応しており、 Firefox にキャッシュをバイパスして現在の文書を強制的に再読み込みするように指示することができます。しかし、他のすべてのブラウザーでは、`location.reload()` の呼び出しで指定した引数は無視され、いかなる効果も持ちません。

しかし、すべてのブラウザーで強制再読み込みの効果が発生することを前提に書かれた既存のコードで `location.reload(true)` のインスタンスに出会うことがあるかもしれません。 GitHub で "`location.reload(true)`" を検索すると、数十万件の結果が得られます。ということは、既存のコードの中にもそれがあるものがたくさんあるのです。

その歴史は、 Netscape Navigator のある版で対応が追加され、それが最終的に Firefox で取り上げられたようです。そして、あるとき W3C Web APIs Working Group が `location.reload()` の仕様に追加することを検討するための課題を取り上げました。しかし、実際に追加されることはありませんでした。

つまり、論理値の引数は現在の `location.reload()` の仕様には含まれていませんし、実際、これまでに発表された `location.reload()` の仕様には含まれていません。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-location-reload-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 所属先の `Location` インターフェイス
* 同様のメソッド: `Location.assign()` および `Location.replace()`
location: origin プロパティ
======================

**`origin`** は `Location` インターフェイスの読み取り専用プロパティで、指定された URL のオリジンの Unicode シリアライズが入った文字列です。

すなわち、下記のようになります。

* `http` または `https` を使用する URL の場合、スキームの後に `'://'` を、その後にドメインを、その後に `':'` を、その後にポート（明示的に指定されなかった場合は、それぞれ既定の `80` および `443` のポート）を指定することができます。
* `file:` スキームを使用した URL では、値はブラウザー依存になります。
* `blob:` スキームを使用した URL では、その URL のオリジンが `blob:` に続きます。例えば、 `"blob:https://mozilla.org"` は `"https://mozilla.org"` がついています。

**注:** この機能は Web Worker 内で利用可能です

値
-

文字列です。

例
-


```js
// このページ上の、オリジンを返します。
const result = window.location.origin; // 返値:'https://developer.mozilla.org'
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-location-origin-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
location: href プロパティ
====================

**`href`** は `Location` インターフェイスのプロパティで、文字列化です。文字列で URL 全体を表し、href を更新することができます。

`href` の値を設定すると、指定された URL に*移動*します。もし、*redirection* が欲しい場合は、`location.replace()`を使用してください。`href` プロパティ値の設定との違いは、 `location.replace()` メソッドを使用した場合、指定した URL に移動した後、現在のページはセッションの履歴に保存されないことです - つまりユーザーは戻るボタンで移動することはできません。

文字列
---

文字列です。

例
-


```js
// 文書内に <a id="myAnchor" href="/ja/docs/Location/href"> 要素があるとする
const anchor = document.getElementById("myAnchor");
const result = anchor.href; // Returns: 'https://developer.mozilla.org/ja/Location/href'
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-location-href-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
location: ancestorOrigins プロパティ
===============================

**`ancestorOrigins`** は `Location` インターフェイスの読み取り専用プロパティで、静的な `DOMStringList` であり、指定された `Location` オブジェクトに関連付けられたこの文書の閲覧コンテキストのすべての祖先のオリジンを、逆順で保持します。

文書のスクリプトで `location.ancestorOrigins` を使用すると、例えば、文書がフレーム化されることを予期していないサイトによってフレーム化されている場合、いつでもそれを判断することができます。また、どのサイトやサイトのリストでフレーム化されているかによって、文書の動作を変えるために使用することもできます。

値
-

`DOMStringList` です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-location-ancestororigins-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
location: hash プロパティ
====================

**`hash`** は `Location` インターフェイスのプロパティで、`'#'` に URL のフラグメント識別子が続く文字列です。これはページ上の ID で、 URL がターゲットにしようとしているものです。

フラグメントは URL デコードされません。 URL にフラグメント識別子がない場合、このプロパティは空文字列、 `""` になります。

値
-

文字列です。

例
-


```html
<a id="myAnchor" href="/ja/docs/Location.href#Examples">Examples</a>
<script>
 const anchor = document.getElementById("myAnchor");
 console.log(anchor.hash); // '#Examples' を返す
</script>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-location-hash-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
location: pathname プロパティ
========================

**`pathname`** は `Location` インターフェイスのプロパティで、その位置を表す URL のパスが入った文字列です。パスがない場合は空文字列になります。そうでない場合、`pathname` には最初の '/' に続いて URL のパス部分が入り、クエリー文字列やフラグメントは含みません。

値
-

文字列です。

例
-


```js
// 文書内に <a id="myAnchor" href="/ja/docs/Location.pathname"> 要素があるとする
const anchor = document.getElementById("myAnchor");
const result = anchor.pathname; // 返値:'/ja/docs/Location.pathname'
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-location-pathname-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
location: toString() メソッド
=========================

**`toString()`** は `Location` インターフェイスの文字列化メソッドであり、URL 全体を文字列で返します。これは `Location.href` の読み取り専用版です。

構文
--


```js
toString()
```

### 引数

なし。

### 返値

このオブジェクトの URL を表す文字列です。

例
-


```js
// このコードが https://example.com/path?search#hash で実行されていると想像してください
const result = window.location.toString(); // 返値: 'https://example.com/path?search#hash'
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-location-href-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
location: replace() メソッド
========================

**`replace()`** は `Location` インターフェイスのメソッドで、現在のリソースを指定された URL のもので置き換えます。 `assign()` メソッドとの違いは、 `replace()` を使用すると現在のページがセッションの `History` に保存されないことです。すなわち、ユーザーが［戻る］ボタンを使用して戻ることができなくなります。

セキュリティ違反のために代入ができない場合、 `DOMException` が `SECURITY_ERROR` 型で発生します。これは、メソッドを呼び出すスクリプトのオリジンが、 `Location` オブジェクトによって元々記述されていたページのオリジンと異なる場合に起こります。主に、スクリプトが異なるドメインでホストされている場合に起こります。

指定された URL が有効でない場合、 `DOMException` が `SYNTAX_ERROR` 型で発生します。

構文
--


```js
replace(url)
```

### 引数

`url`

文字列で、移動先のページの URL です。

### 返値

なし (`undefined`)。

例
-


```js
// このページを置き換えて、 Location.reload の記事に移動します。
window.location.replace(
  "https://developer.mozilla.org/ja/docs/Web/API/Location.reload",
);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-location-replace-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 所属先の `Location` インターフェイス
* 同様のメソッド: `Location.assign()` および `Location.reload()`
location: search プロパティ
======================

**`search`** は `Location` インターフェイスのプロパティで、*クエリー文字列*とも呼ばれる検索文字列です。つまり、 `'?'` の後の URL 引数を含む文字列を指定します。

最近のブラウザーでは、クエリー文字列から引数を簡単に解析するために、 `URLSearchParams` と `URL.searchParams` が提供されています。

値
-

文字列です。

例
-


```js
// 文書内に <a id="myAnchor" href="/ja/docs/Location.search?q=123"> 要素があるとする
const anchor = document.getElementById("myAnchor");
const queryString = anchor.search; // Returns:'?q=123'

// さらに解釈する
const params = new URLSearchParams(queryString);
const q = parseInt(params.get("q")); // 数値 123
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-location-search-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
location: protocol プロパティ
========================

**`protocol`** は `Location` インターフェイスのプロパティで、 URL のプロトコルスキームを、最後の `':'` を含めて表す文字列です。

値
-

文字列です。

例
-


```js
// 文書内に <a id="myAnchor" href="/ja/docs/Location.search?q=123"> 要素があるとする
const anchor = document.getElementById("myAnchor");
const result = anchor.protocol; // Returns:'https:'
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-location-protocol-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSStyleSheet: removeRule() メソッド
================================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

旧式の `CSSStyleSheet` の **`removeRule()`** メソッドは、スタイルシートオブジェクトからルールを削除します。これは、標準で推奨されるメソッド `deleteRule()` と機能的に同じです。

**メモ:** これは古いメソッドであり、標準のメソッド `deleteRule()` によって置き換えられました。代わりにこちらを使用してください。

構文
--


```js
removeRule(index)
```

### 引数

`index`

このスタイルシートの `CSSRuleList` の中の位置で、削除するルールを示します。

### 返値

なし (`undefined`)。

例
-

この例では、スタイルシート `myStyles` から最初のルールを削除します。


```js
myStyles.removeRule(0);
```


これを標準の `deleteRule()` メソッドを使用するように書き換えるのは、とても簡単です。


```js
myStyles.deleteRule(0);
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstylesheet-removerule |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS オブジェクトモデル
* 動的スタイル情報の利用
* `insertRule()`
CSSStyleSheet: cssRules プロパティ
=============================

**`cssRules`** は `CSSStyleSheet` の読み取り専用プロパティで、スタイルシートを構成するすべての CSS ルールについて、リアルタイムで最新のリストを提供する生きた `CSSRuleList` を返します。リストの各項目は、単一のルールを定義する `CSSRule` です。

値
-

ライブで更新される `CSSRuleList` で、スタイルシートを構成するすべての CSS ルールを含みます。ルールリストのそれぞれの項目は、スタイルシートを構成する単一のルールを記述する `CSSRule` オブジェクトです。

例
-

スタイルシートの中のそれぞれのルールは、添字でアクセスすることができます。


```js
const ruleList = document.styleSheets[0].cssRules;

for (let i = 0; i < ruleList.length; i++) {
  processRule(ruleList[i]);
}
```


ルールは `for...of` を使用してアクセスすることもできます。


```js
const ruleList = document.styleSheets[0].cssRules;

for (const rule of ruleList) {
  processRule(rule);
}
```


しかし、 `CSSRule` は厳密には配列ではないので、 `forEach()` を使用することはできません。

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstylesheet-cssrules |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS オブジェクトモデル
* 動的なスタイル情報の使用
CSSStyleSheet: deleteRule() メソッド
================================

**`CSSStyleSheet.deleteRule()`** メソッドは、スタイルルールを現在のスタイルシートオブジェクトから削除します。

構文
--


```js
deleteRule(index)
```

### 引数

`index`

このスタイルシートの `CSSRuleList` で、削除するルールの位置を示します。

### 返値

なし (`undefined`)。

例
-

この例では、スタイルシート `myStyles` から最初のルールを削除します。


```js
myStyles.deleteRule(0);
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstylesheet-deleterule |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS オブジェクトモデル
* Constructable Stylesheets (web.dev)
* 動的スタイル情報の利用
* `insertRule()`
CSSStyleSheet: rules プロパティ
==========================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`rules`** は `CSSStyleSheet` インターフェイスの非推奨の古いプロパティです。機能的には推奨される `cssRules` プロパティと同じで、
 スタイルシートを構成する CSS ルールのライブ更新されるリストにアクセスすることができます。


**メモ:** 古いプロパティなので、`rules`は使用せず、代わりに推奨される `cssRules` を使用しましょう。
 `rules` がすぐに削除される可能性は低いですが、利用できる範囲はそれほど広くなく、これを使用するとサイトやアプリの互換性に問題が発生します。


値
-

スタイルシートを構成する各 CSS ルールを格納するライブ更新される `CSSRuleList` です。ルールリストの各項目は `CSSRule` オブジェクトであり、スタイルシートを構成する 1 つのルールを記述しています。

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstylesheet-rules |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS オブジェクトモデル
* 動的スタイル情報の利用
CSSStyleSheet: addRule() メソッド
=============================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

旧式の `CSSStyleSheet` インターフェイスの **`addRule()`** は古いメソッドで、新しいルールをスタイルシートに追加します。このメソッドの使用を避け、より標準的な `insertRule()` メソッドを使用しましょう。

構文
--


```js
addRule(selector, styleBlock, index)
```

### 引数

`selector`

CSS ルールのセレクター部分を指定する文字列です。既定値は文字列 `undefined` です。

`styleBlock`

`selector` に一致する要素に適用されるスタイルブロックを示す文字列です。既定値は文字列 `undefined` です。

`index` 省略可

オプションで、このスタイルシートの `CSSRuleList` の中に新しいルールを挿入するための位置を指定します。`index` が指定されなかった場合、現在リストにある最後の項目の次の位置（つまり、 `cssStyleSheet.cssRules.length` の値）が使用されます。

### 返値

常に -1 を返します。

ルールを合法的に挿入できる場所に関するルールがやや難解なため、例外が発生する可能性があることに注意してください。詳細は `insertRule()` を参照してください。

使用上の注意
------

このメソッドはブラウザーでは、テンプレートリテラル ``${selector}{${styleBlock}}`` を使用して文字列を構築し、それから標準の `insertRule()` メソッドを呼び出すように実装されています。

従って、以下のような既存のコードがあった場合、


```js
cssStyleSheet.addRule(selector, styles, 0);
```


次のようにして、もっと標準の `insertRule()` を使用して書き直すことができます。


```js
cssStyleSheet.insertRule(`${selector} {${styles}}`, 0);
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstylesheet-addrule |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS オブジェクトモデル
* 動的スタイル情報の利用
CSSStyleSheet: CSSStyleSheet() コンストラクター
=======================================

**`CSSStyleSheet()`** コンストラクターは、新しい `CSSStyleSheet` オブジェクトを生成します。これは、単一のスタイルシートを表します。

スタイルシートを構築した後は、`CSSStyleSheet.replace()`、`CSSStyleSheet.replaceSync()`、`CSSStyleSheet.insertRule()`、`CSSStyleSheet.deleteRule()` の各メソッドを使用して、新しいスタイルシートのルールを変更することができます。

 このメソッドを使用して生成されたスタイルシートは「構築スタイルシート」(constructed stylesheet) と呼ばれます。
 構築スタイルシートは、 `ShadowRoot.adoptedStyleSheets` (en-US) および `Document.adoptedStyleSheets` (en-US) を使用して文書やそのシャドウ DOM サブツリー間で共有することができます。

構文
--


```js
new CSSStyleSheet()
new CSSStyleSheet(options)
```

### 引数

`options` 省略可

以下のものを持つオブジェクトです。

`baseURL` 省略可

スタイルシートの相対 URL の解決に用いる `baseURL` を格納した文字列。

`media` 省略可

メディアルールのリストを含む `MediaList`、または単一のルールを含む文字列。

`disabled` 省略可

論理値で、スタイルシートが無効かどうかを示します。既定で false になります。


例
-

 次の例では、新しい `CSSStyleSheet` が `"print"` というメディアルールで構築されています。
 コンソールで `StyleSheet.media` を表示すると、このプリントルールの単一の項目を持つ `MediaList` が返されます。


```js
let stylesheet = new CSSStyleSheet({ media: "print" });
console.log(stylesheet.media);
```

### スタイルシートのシャドウ DOM との共有

次のコードは、シートを構築し、`CSSStyleSheet.replaceSync()` を呼び出して、シートにルールを追加する様子を表します。


```js
// 空の「構築」スタイルシートを生成
const sheet = new CSSStyleSheet();
// シートにルールを適用
sheet.replaceSync("a { color: red; }");
```


そして、`ShadowRoot` を作成し、このシートオブジェクトを配列内の `ShadowRoot.adoptedStyleSheets` (en-US) プロパティに渡しています。


```js
// 文書内に要素を作成し、シャドウルートを作成する
const node = document.createElement("div");
const shadow = node.attachShadow({ mode: "open" });

//シートをシャドウ DOM に導入
shadow.adoptedStyleSheets = [sheet];
```


 配列に追加した後のスタイルシートは変更することができます。
 次の例では、`CSSStyleSheet.insertRule()` を使用して、同じシートに新しいルールを追加しています。


```js
sheet.insertRule("\* { background-color: blue; }");
// これで、文書の背景が青色になる
```


 同じ文書内の複数のシャドウサブツリーで同じシートを共有することができます。
 それ以外の例は、`ShadowRoot.adoptedStyleSheets` (en-US) を参照してください。

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstylesheet-cssstylesheet |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* Constructable Stylesheets (web.dev)
* シャドウ DOM の使用
* construct-style-sheets-polyfill
CSSStyleSheet: ownerRule プロパティ
==============================

`CSSStyleSheet` の **`ownerRule`** は読み取り専用プロパティで、`CSSImportRule` を返します。これは、スタイルシートを文書にインポートする `@import` アットルールに対応します。スタイルシートが `@import` を使用して文書にインポートされていない場合、返される値は `null` です。

値
-

`CSSImportRule` です。これは、スタイルシートを文書にインポートする `@import` アットルールに対応します。スタイルシートが `@import` を使用して文書にインポートされていない場合、返される値は `null` です。

例
-

このスニペットは、`@import` アットルールを使用して文書にインポートされていないルールを探すものです。


```js
const ruleList = document.styleSheets[0].cssRules;

for (const rule of ruleList) {
  if (!rule.ownerRule) {
    /\* ルールはインポートされていない \*/
  }
}
```


このスニペットは、`@import` に関連するスタイルシートへの参照を取得し、それを何らかの方法で処理します。


```js
const ruleList = document.styleSheets[0].cssRules;

for (const rule of ruleList) {
  if (rule.ownerRule) {
    checkStylesheet(rule.ownerRule.styleSheet);
  }
}
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstylesheet-ownerrule |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS オブジェクトモデル
* 動的スタイル情報の利用
CSSStyleSheet: replace() メソッド
=============================

**`replace()`** は `CSSStyleSheet` インターフェイスのメソッドで、スタイルシートの内容を渡された内容で非同期に置き換えます。このメソッドは `CSSStyleSheet` オブジェクトで解決されるプロミスを返します。

`replace()` と `CSSStyleSheet.replaceSync()` の両メソッドは、 `CSSStyleSheet()` コンストラクターで作成されたスタイルシートでのみ使用できます。

構文
--


```js
replace(text)
```

### 引数

`text`

スタイルシートのコンテンツを置き換えるためのスタイルルールを格納した文字列。文字列に解釈可能なルールのリストが入っていない場合、値は空文字列に設定されます。

**メモ:** もし `text` に渡されたルールの中に `@import` ルールでインポートされた外部スタイルシートがあった場合は、それらのルールは除去され、コンソールに警告が出力されます。

### 返値

`Promise` で、 `CSSStyleSheet` に解決します。

### 例外

`NotAllowedError` `DOMException`

次の 2 つの条件のうち一方が成立した場合に発生します。

* このスタイルシートが `CSSStyleSheet()` コンストラクターを使用して作成されていない。
* このスタイルシートが変更不可に設定されている。

例
-

次の例では、新しいスタイルシートを作成し、`replace()` を使って 2 つの CSS ルールを追加しています。最初のルールはコンソールに `body { font-size: 1.4em; }` と表示されます。


```js
const stylesheet = new CSSStyleSheet();

stylesheet
  .replace("body { font-size: 1.4em; } p { color: red; }")
  .then(() => {
    console.log(stylesheet.cssRules[0].cssText);
  })
  .catch((err) => {
    console.error("Failed to replace styles:", err);
  });
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstylesheet-replace |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* Constructable Stylesheets (web.dev)
* シャドウ DOM の使用