---
title: DocumentOrShadowRoot.styleSheets
slug: Web/API/Document/styleSheets
tags:
  - API
  - Document
  - DocumentOrShadowRoot
  - Property
  - Reference
  - ShadowRoot
  - Stylesheets
  - shadow dom
translation_of: Web/API/DocumentOrShadowRoot/styleSheets
original_slug: Web/API/DocumentOrShadowRoot/styleSheets
---
<div>{{SeeCompatTable}}{{APIRef("Shadow DOM")}}</div>

<p><span class="seoSummary">{{domxref("DocumentOrShadowRoot")}} インターフェイスの <strong><code>styleSheets</code></strong> 読み取り専用プロパティは、 {{domxref('CSSStyleSheet')}} オブジェクトの {{domxref('StyleSheetList')}} を返します。ドキュメントに明示的にリンクまたは埋め込まれたスタイルシートの場合。</span></p>

<h2 id="例">例</h2>

<pre class="brush: js notranslate">function getStyleSheet(unique_title) {
  for (var i=0; i&lt;document.styleSheets.length; i++) {
    var sheet = document.styleSheets[i];
    if (sheet.title == unique_title) {
      return sheet;
    }
  }
}
</pre>

<h3 id="Notes">Notes</h3>

<p>返されるリストは次の順序で並べられます:</p>

<ul>
 <li>{{htmlelement("link")}} ヘッダから取得したスタイルシートが最初に配置され、ヘッダ順に並べ替えられます。</li>
 <li>DOM から取得したスタイルシートは、<a href="https://dom.spec.whatwg.org/#concept-tree-order">ツリー順</a>にソートされた後に配置されます。</li>
</ul>

<h2 id="仕様">仕様</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">仕様</th>
   <th scope="col">ステータス</th>
   <th scope="col">備考</th>
  </tr>
  <tr>
   <td>{{SpecName('Shadow DOM','#extensions-to-the-documentorshadowroot-mixin','DocumentOrShadowRoot')}}</td>
   <td>{{Spec2('Shadow DOM')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2>



<p>{{Compat("api.DocumentOrShadowRoot.styleSheets")}}</p>