要素の幅と高さを決定するために見ることがあるプロパティはいくつかあり、どれがニーズに適しているかを特定するのが難しい場合があります。この記事は、その決定に役立つように作られています。これらのプロパティはすべて読み取り専用であることに注意してください。要素の幅と高さを設定する場合は、 {{CSSxRef("width")}} と {{CSSxRef("height")}}、またはそれをオーバーライドする {{CSSxRef("min-width")}} と {{CSSxRef("max-width")}}、および {{CSSxRef("min-height")}} と {{CSSxRef("max-height")}} プロパティを使用してください。
- -表示されているコンテンツの幅、スクロールバー (存在する場合)、パディング、境界を含んだ、要素が占める空間の合計量を知る必要がある場合は、{{DOMxRef("HTMLElement.offsetWidth")}} プロパティと {{DOMxRef("HTMLElement.offsetHeight")}} プロパティを使用します。 ほとんどの場合、要素に適用される変換がなければ、これらは {{DOMxRef("Element.getBoundingClientRect()")}} の幅と高さと同じです。変換がある場合、offsetWidth および offsetHeight は要素のレイアウトの幅と高さを返し、getBoundingClientRect() はレンダリングの幅と高さを返します。例として、要素に width: 100px; と transform: scale(0.5); がある場合 getBoundingClientRect() は幅として 50 を返し、offsetWidth は 100 を返します。
パディングを含み、境界、マージン、スクロールバーは含まない、実際に表示されるコンテンツが占める空間を知る必要がある場合は、 {{DOMxRef("Element.clientWidth")}} プロパティと {{DOMxRef("Element.clientHeight")}} プロパティを使用します。
- -
コンテンツの実際のサイズを知る必要がある場合は、現在どれだけ表示されているかに関係なく、{{DOMxRef("Element.scrollWidth")}} プロパティと {{DOMxRef("Element.scrollHeight")}} プロパティを使用する必要があります。 これらは、スクロールバーの使用により現在一部のみが表示されている場合でも、要素のコンテンツ全体の幅と高さを返します。
- -例えば、 600x400 ピクセルの要素が 300x300 ピクセルのスクロールボックス内に表示されている場合、scrollWidth は 600 を返し、scrollHeight は 400 を返します。
{{DefaultAPISidebar("CSSOM")}}
- -CSS オブジェクトモデルは CSS を JavaScript から操作するための API の集合です。これは DOM にとても良く似ていますが、 HTML ではなく CSS のためのものです。これにより CSS スタイルを動的に読んだり変更したりすることができます。
-CSS の値は型を使わずに表現しますので、 {{JSxRef("String")}} オブジェクトを使用します。
- -他にも CSSOM に関する仕様書で拡張されているインターフェイスがあります。 {{DOMxRef("Document")}}, {{DOMxRef("Window")}}, {{DOMxRef("Element")}}, {{DOMxRef("HTMLElement")}}, {{DOMxRef("HTMLImageElement")}}, {{DOMxRef("Range")}}, {{DOMxRef("MouseEvent")}}, {{DOMxRef("SVGElement")}} です。
- -{{SeeCompatTable}}
- -{{deprecated_header}}
- -| 仕様書 | -状態 | -備考 | -
|---|---|---|
| {{SpecName("CSS Typed OM")}} | -{{Spec2("CSS Typed OM")}} | -- |
| {{SpecName("CSS Painting API")}} | -{{Spec2("CSS Painting API")}} | -{{DOMxRef("CSS")}} インターフェイスを {{DOMxRef("CSS.paintWorklet","paintWorklet")}} 静的プロパティで拡張。 | -
| {{SpecName("CSSOM View")}} | -{{Spec2("CSSOM View")}} | -{{DOMxRef("Screen")}} および {{DOMxRef("MediaQueryList")}} インターフェイスと {{DOMxRef("MediaQueryListEvent")}} イベントと {{DOMxRef("MediaQueryListListener")}} イベントリスナーを定義。 | -
| {{SpecName("CSSOM")}} | -{{Spec2("CSSOM")}} | -{{DOMxRef("CSS")}} インターフェイスを拡張し、最新の CSSOM 仕様書の基礎を提供。 | -
| {{SpecName("Screen Orientation")}} | -{{Spec2("Screen Orientation")}} | -- |
| {{SpecName("CSS3 Fonts")}} | -{{Spec2("CSS3 Fonts")}} | -- |
| {{SpecName("CSS3 Animations")}} | -{{Spec2("CSS3 Animations")}} | -- |
| {{SpecName("CSS3 Transitions")}} | -{{Spec2("CSS3 Transitions")}} | -- |
| {{SpecName("CSS3 Variables")}} | -{{Spec2("CSS3 Variables")}} | -- |
| {{SpecName("CSS3 Conditional")}} | -{{Spec2("CSS3 Conditional")}} | -{{DOMxRef("CSS")}} インターフェイスを定義。 | -
| {{SpecName("CSS3 Device")}} | -{{Spec2("CSS3 Device")}} | -- |
| {{SpecName("CSS3 Counter Styles")}} | -{{Spec2("CSS3 Counter Styles")}} | -- |
| {{SpecName("DOM2 Style")}} | -{{Spec2("DOM2 Style")}} | -初回定義 | -
この機能のすべてはさまざまなブラウザーで何年かけて少しずつ追加されてきました。これは簡単なページにまとめることができないとても複雑なプロセスでした。利用できるかについてはそれぞれのインターフェイスを参照してください。
- -{{DefaultAPISidebar("Screen Orientation API")}}{{SeeCompatTable}}
- -画面の向きは、端末の向きと異なる場合があります。端末が自身の向きを検知することができない場合でも、画面には向きがあります。また端末が自身の向きを知ることが可能であっても、Web アプリケーションのインターフェイスを維持または適合するために画面の向きを制御できるとよいでしょう。
- -CSS と JavaScript の双方に、画面の向きを扱う方法がいくつかあります。第一の方法は orientation メディアクエリです。これはブラウザウィンドウがランドスケープモード (すなわち幅が高さより大きい) かポートレートモード (高さが幅より大きい) かに基づいて、CSS を使用してコンテンツのレイアウトを調整できます。
- -第二の方法は、画面自身の現在の向きを取得して最終的に固定するために使用できる、JavaScript の Screen Orientation API です。
- -向きの変化についてのもっとも一般的なケースのひとつが、端末の向きに基づいてコンテンツのレイアウトを変更したいときです。例えば、端末のディスプレイで最長の寸法に沿ってボタンバーを引き伸ばしたいでしょう。メディアクエリを使用して、簡単かつ自動的にこれを行うことができます。
- -以下の HTML コードによる例を見てみましょう。
- -<ul id="toolbar"> - <li>A</li> - <li>B</li> - <li>C</li> -</ul> - -<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.</p> -- -
画面の向きに応じて固有のスタイルを扱うために、CSS で orientation メディアクエリに頼ります。
- -/* 始めに、共通のスタイルを定義しましょう */
-
-html, body {
- width : 100%;
- height: 100%;
-}
-
-body {
- border: 1px solid black;
-
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-p {
- font : 1em sans-serif;
- margin : 0;
- padding: .5em;
-}
-
-ul {
- list-style: none;
-
- font : 1em monospace;
- margin : 0;
- padding: .5em;
-
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-
- background: black;
-}
-
-li {
- display: inline-block;
- margin : 0;
- padding: 0.5em;
- background: white;
-}
-
-
-共通のスタイルを定義したら、続いて向きに対して特有のケースの定義を始めましょう。
- -/* 縦長の場合はツールバーを上に置きたい */
-
-@media screen and (orientation: portrait) {
- #toolbar {
- width: 100%;
- }
-}
-
-/* 横長の場合はツールバーを左端に付けたい */
-
-@media screen and (orientation: landscape) {
- #toolbar {
- position: fixed;
- width: 2.65em;
- height: 100%;
- }
-
- p {
- margin-left: 2em;
- }
-
- li + li {
- margin-top: .5em;
- }
-}
-
-
-結果は以下のとおりです。
- -| 縦長 | -横長 | -
|---|---|
| {{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 180, 350) }} | -{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 350, 180) }} | -
メモ: orientation メディアクエリは、実際は端末の向きではなくブラウザウィンドウ (または iframe) の向きに応じて適用されます。
-警告: この API は実験的であり現在は moz 接頭辞付きで、Firefox OS および Android 版 Firefox で使用できます。また、Windows 8.1 以降の Internet Explorer では ms 接頭辞付きで使用できます。
一部の端末 (主にモバイル端末) は、画面に表示している内容をいつでも読めるようにするため、端末の向きに基づいて画面の向きを動的に変更できます。この動作はテキストコンテンツにはとても適していますが、そのような変化を好まないコンテンツも存在します。例えば端末の向きに基づくゲームでは、そのような向きの変化によって混乱してしまうでしょう。
- -Screen Orientation API は、そのような変化を抑制したり制御したりするものです。
- -{{event("orientationchange")}} イベントは、端末が画面の向きを変更する度に発生します。また、向きそのものを {{domxref("Screen.orientation")}} プロパティで読み取ることが可能です。
- -screen.addEventListener("orientationchange", function () {
- console.log("The orientation of the screen is: " + Screen.orientation);
-});
-
-
-任意の Web アプリケーションが、自身の要望に合うように画面を固定できます。{{domxref("Screen.lockOrientation()")}} メソッドを使用して画面の固定を、また {{domxref("Screen.unlockOrientation()")}} メソッドで固定の解除を行います。
- -{{domxref("Screen.lockOrientation()")}} は、適用する固定方式を定義する文字列 (または一連の文字列) を受け入れます。受け入れる値: portrait-primary、portrait-secondary、landscape-primary、landscape-secondary、portrait、landscape (それぞれの値について知るために {{domxref("Screen.lockOrientation")}} をご覧ください)。
Screen.lockOrientation('landscape');
-
-メモ: 画面の固定はウェブアプリケーションに従属します。アプリケーション A が landscape に固定、またアプリケーション B が portrait に固定した場合は、アプリケーション A から B に、または B から A に切り替えても {{event("orientationchange")}} イベントは発生しません。これは、双方のアプリケーションが自身の向きを維持しているためです。
ただし、固定の要求を満たすために向きを変更しなければならない場合は、向きの固定で {{event("orientationchange")}} イベントが発生してもかまいません。
-Firefox OS および Android 版 Firefox (近いうちにデスクトップ版 Firefox も対応予定) 特有の向きをロックする方法として、アプリのマニフェストで orientation フィールドを設定できます。例を示します:
- -"orientation": "portrait"- -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.
+``` + +画面の向きに応じて固有のスタイルを扱うために、CSS で orientation メディアクエリに頼ります。 + +```css +/* 始めに、共通のスタイルを定義しましょう */ + +html, body { + width : 100%; + height: 100%; +} + +body { + border: 1px solid black; + + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +p { + font : 1em sans-serif; + margin : 0; + padding: .5em; +} + +ul { + list-style: none; + + font : 1em monospace; + margin : 0; + padding: .5em; + + -moz-box-sizing: border-box; + box-sizing: border-box; + + background: black; +} + +li { + display: inline-block; + margin : 0; + padding: 0.5em; + background: white; +} +``` + +共通のスタイルを定義したら、続いて向きに対して特有のケースの定義を始めましょう。 + +```css +/* 縦長の場合はツールバーを上に置きたい */ + +@media screen and (orientation: portrait) { + #toolbar { + width: 100%; + } +} + +/* 横長の場合はツールバーを左端に付けたい */ + +@media screen and (orientation: landscape) { + #toolbar { + position: fixed; + width: 2.65em; + height: 100%; + } + + p { + margin-left: 2em; + } + + li + li { + margin-top: .5em; + } +} +``` + +結果は以下のとおりです。 + +| 縦長 | 横長 | +| ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | +| {{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 180, 350) }} | {{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 350, 180) }} | + +> **Note:** **メモ:** orientation メディアクエリは、実際は端末の向きではなくブラウザウィンドウ (または iframe) の向きに応じて適用されます。 + +## 画面の向きを固定する + +> **Warning:** **警告:** この API は実験的であり現在は `moz` 接頭辞付きで、[Firefox OS](/ja/docs/Mozilla/Firefox_OS "Mozilla/Firefox_OS") および [Android 版 Firefox](/ja/docs/Mozilla/Firefox_for_Android "Mozilla/Firefox_for_Android") で使用できます。また、Windows 8.1 以降の Internet Explorer では `ms` 接頭辞付きで使用できます。 + +一部の端末 (主にモバイル端末) は、画面に表示している内容をいつでも読めるようにするため、端末の向きに基づいて画面の向きを動的に変更できます。この動作はテキストコンテンツにはとても適していますが、そのような変化を好まないコンテンツも存在します。例えば端末の向きに基づくゲームでは、そのような向きの変化によって混乱してしまうでしょう。 + +Screen Orientation API は、そのような変化を抑制したり制御したりするものです。 + +### 向きの変化をリッスンする + +{{event("orientationchange")}} イベントは、端末が画面の向きを変更する度に発生します。また、向きそのものを {{domxref("Screen.orientation")}} プロパティで読み取ることが可能です。 + +```js +screen.addEventListener("orientationchange", function () { + console.log("The orientation of the screen is: " + Screen.orientation); +}); +``` + +### 向きの変更を抑制する + +任意の Web アプリケーションが、自身の要望に合うように画面を固定できます。{{domxref("Screen.lockOrientation()")}} メソッドを使用して画面の固定を、また {{domxref("Screen.unlockOrientation()")}} メソッドで固定の解除を行います。 + +{{domxref("Screen.lockOrientation()")}} は、適用する固定方式を定義する文字列 (または一連の文字列) を受け入れます。受け入れる値: `portrait-primary`、`portrait-secondary`、`landscape-primary`、`landscape-secondary`、`portrait`、`landscape` (それぞれの値について知るために {{domxref("Screen.lockOrientation")}} をご覧ください)。 + +```js +Screen.lockOrientation('landscape'); +``` + +> **Note:** **メモ:** 画面の固定はウェブアプリケーションに従属します。アプリケーション A が `landscape` に固定、またアプリケーション B が `portrait` に固定した場合は、アプリケーション A から B に、または B から A に切り替えても {{event("orientationchange")}} イベントは発生しません。これは、双方のアプリケーションが自身の向きを維持しているためです。 +> +> ただし、固定の要求を満たすために向きを変更しなければならない場合は、向きの固定で {{event("orientationchange")}} イベントが発生してもかまいません。 + +## Firefox OS および Android: マニフェストを使用して向きをロックする + +Firefox OS および Android 版 Firefox (近いうちにデスクトップ版 Firefox も対応予定) 特有の向きをロックする方法として、アプリのマニフェストで [orientation](/ja/Apps/Build/Manifest#orientation) フィールドを設定できます。例を示します: + +```json +"orientation": "portrait" +``` + +## 関連情報 + +- {{domxref("Screen.orientation")}} +- {{domxref("Screen.lockOrientation()")}} +- {{domxref("Screen.unlockOrientation()")}} +- {{domxref("Screen.onorientationchange")}} +- [orientation メディアクエリ](/ja/docs/CSS/Media_queries#orientation "CSS/Media queries#orientation") +- [A short introduction to media queries in Firefox 3.5](http://hacks.mozilla.org/2009/06/media-queries/) diff --git a/files/ja/web/api/css_object_model/using_dynamic_styling_information/index.html b/files/ja/web/api/css_object_model/using_dynamic_styling_information/index.html deleted file mode 100644 index 3906836f8ff9e3..00000000000000 --- a/files/ja/web/api/css_object_model/using_dynamic_styling_information/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: 動的なスタイル情報の利用 -slug: Web/API/CSS_Object_Model/Using_dynamic_styling_information -tags: - - Beginner - - CSSOM -translation_of: Web/API/CSS_Object_Model/Using_dynamic_styling_information ---- -{{DefaultAPISidebar("CSSOM")}}
- -DOM の一部である CSS Object Model (CSSOM) では、 CSS に関する様々な情報を操作するインターフェイスを公開しています。これらは DOM Level 2 Style 勧告で定義されたのち、現在ではそれを置き換える CSS Object Model (CSSOM) で規格化されています。
- -多くの場面で、可能であれば {{ domxref("element.className", "className") }} プロパティを使ってクラスを操作することが推奨されます。最終的なスタイルをひとつのスタイルシートで制御できる上、JavaScript コードはスタイルの詳細を気にすることなく、正確な詳細はスタイルシートに任せたまま、作成・操作する各セクションの全体的な意味づけに注目できます。しかしながら（スタイルシート全体もしくはある要素についての）個々のルールを操作する方が便利なこともあり、以下でさらに詳しく説明します。なおスタイルシートを操作するといっても物理的なドキュメントを操作するわけではなく、要素の DOM スタイルのような内部表現を操作しているだけということに注意してください。
- -基本となる style オブジェクトは {{domxref("Stylesheet")}} インターフェイスと {{domxref("CSSStylesheet")}} インターフェイスを公開しています。これらのインターフェイスが備える insertRule, selectorText, parentStyleSheet などのメンバーを使うことで、CSS スタイルシートを構成する個々のスタイルにアクセス・操作できます。
document から style オブジェクトの集合を取得するには {{domxref("document.styleSheets")}} プロパティを使い、インデックスを付けることで個々のオブジェクトにアクセスできます (ドキュメント内の最初のスタイルシートなら document.styleSheets[0] といった具合に)。
<html>
-<head>
-<title>Modifying a stylesheet rule with CSSOM</title>
-<style type="text/css">
-body {
- background-color: red;
-}
-</style>
-<script type="text/javascript">
-var stylesheet = document.styleSheets[0];
-stylesheet.cssRules[0].style.backgroundColor="blue";
-</script>
-</head>
-<body>
-body の背景色に対するスタイルシートを JavaScript で変更しています。
-</body>
-</html>
-
-{{ EmbedLiveSample('Modify_a_stylesheet_rule') }}
- -DOM の style プロパティで利用可能なプロパティの一覧は DOM CSS プロパティリスト に載っています。
CSS の文法を使ってドキュメントのスタイルを変更したい場合は、ルールを追加するか、innerHTML に CSS を設定した {{HTMLElement("style")}} を挿入します。
要素の {{domxref("HTMLElement.style", "style")}} プロパティ（後述する "DOM Style オブジェクト" も参照）を使って個々の要素のスタイルを取得または設定することもできます。ただしこのプロパティはインラインに指定された style 属性しか考慮しません。つまり <td style="background-color: lightblue"> であれば "background-color:lightblue" という文字列、もしくは element.style.propertyName を通してこのスタイルにアクセスできますが、スタイルシートで定義された他のスタイルの存在は考慮されません。
また要素のこのプロパティの設定値は、よそでこの要素に定義されたスタイルよりも優先されます。 例えばここで border プロパティを設定した場合、 その要素に対して head 部や外部のスタイルシートで定義されていた border プロパティの指定を上書きすることになります。しかし、その要素に適用される他のプロパティ、 padding や margin や font などには影響を与えません。
個別の要素のスタイルを変更するには次のようにします。
- -<html>
-<head>
-<title>simple style example</title>
-
-<script type="text/javascript">
-
-function alterStyle(elem) {
- elem.style.background = 'green';
-}
-
-function resetStyle(elemId) {
- elem = document.getElementById(elemId);
- elem.style.background = 'white';
-}
-</script>
-
-<style type="text/css">
-#p1 {
- border: solid blue 2px;
-}
-</style>
-</head>
-
-<body>
-
-<!-- スタイルを変える要素のオブジェクトとして 'this' を渡す -->
-<p id="p1" onclick="alterStyle(this);">
- クリックして背景色を変更
-</p>
-
-<!-- スタイルを変える要素のID 'p1' を渡す -->
-<button onclick="resetStyle('p1');">背景色をリセット</button>
-
-</body>
-</html>
-
-
-{{ EmbedLiveSample('Modify_an_element_style') }}
- -document.defaultView オブジェクトの {{domxref("window.getComputedStyle", "getComputedStyle()")}} メソッドは、その要素に対して計算された全てのスタイルを返します。このメソッドの使い方について詳しくはサンプルの Example 6: getComputedStyle を参照してください。
style オブジェクトは独立したスタイル指定です。 document.styleSheets から個別にルールを取得するのとは異なり、 style オブジェクトは document またはスタイルが適用される要素から取得されます。ある特定の要素のインラインスタイルを表します。
この記事で例示した CSS プロパティに限らず、 style オブジェクトを通して要素のスタイルを個別に操作できるという点が重要です。
<!DOCTYPE html>
-<html>
- <head>
- <title>style Property Example</title>
- <link rel="StyleSheet" href="example.css" type="text/css">
- <script type="text/javascript">
- function stilo() {
- document.getElementById('d').style.color = 'orange';
- }
- function resetStyle() {
- document.getElementById('d').style.color = 'black';
- }
- </script>
- </head>
-
- <body>
- <div id="d" class="thunder">Thunder</div>
- <button onclick="stilo()">テキストの色を変える</button>
- <button onclick="resetStyle()">テキストの色を元に戻す</button>
- </body>
-</html>
-
-{{ EmbedLiveSample('DOM_Style_Object_code_sample') }}
- -スタイルの media や type は存在しないこともあります。
- -要素のスタイルの変更には、要素の setAttribute メソッドを使うこともできます。
var el = document.getElementById('some-element');
-el.setAttribute('style', 'background-color:darkblue;');
-
-
-setAttribute を使うと要素の style オブジェクトで定義されていた既存の style プロパティの指定は全て失われることに注意が必要です。もし上の例に使った some-element 要素の style 属性がインラインで style="font-size: 18px" のように指定されていた場合、この指定は setAttribute を使うことで失われます。
+ クリックして背景色を変更 +
+ + + + + + +``` + +{{ EmbedLiveSample('Modify_an_element_style') }} + +`document.defaultView` オブジェクトの {{domxref("window.getComputedStyle", "getComputedStyle()")}} メソッドは、その要素に対して計算された全てのスタイルを返します。このメソッドの使い方について詳しくはサンプルの [Example 6: getComputedStyle](/ja/Gecko_DOM_Reference/Examples#Example_6:_getComputedStyle "en/Gecko_DOM_Reference/Examples#Example_6:_getComputedStyle") を参照してください。 + +## DOM Style オブジェクト + +`style` オブジェクトは独立したスタイル指定です。 [`document.styleSheets`](/ja/DOM/document.styleSheets "en/DOM/document.styleSheets") から個別にルールを取得するのとは異なり、 style オブジェクトは `document` またはスタイルが適用される要素から取得されます。ある特定の要素の*インライン*スタイルを表します。 + +この記事で例示した CSS プロパティに限らず、 `style` オブジェクトを通して要素のスタイルを個別に操作できるという点が重要です。 + +```html + + + +CSS Paint API を用いると開発者がプログラムで画像を定義できます。CSS の background-image, border-image, mask-image など CSS 画像を呼び出せる場所ならどこでも使用できるように設計されています。
CSS スタイルシートで使用される画像をプログラムで作成するには、いくつかのステップを踏む必要があります:
- -registerPaint() 関数を用いたペイント Worklet を定義します{{cssxref('paint()','paint()')}} という CSS 関数を読み込みますこれらの手順を詳しく説明するために、このヘッダーのようなハーフハイライトの背景を作成することから始めます:
- -
外部スクリプトファイルでは、registerPaint() 関数を使用して CSS Paint worklet の名前をつけています。この関数には 2 つの引数が必要です。最初の引数はその Worklet の名前です — これは CSS で要素にスタイルを適用する際に paint() 関数のパラメーターとして渡されます。2 つ目の引数は、すべての魔法を行うクラスで、その中でコンテキストオプションと、イメージとなる 2 次元キャンバスに何を描画するかを定義します。
registerPaint('headerHighlight', class {
-
- /*
- アルファ透明度を許可するかどうかを定義します。既定では true にします。
- false に設定した場合、すべてのキャンバスに
- 使用されている色は完全に不透明になります。
- */
- static get contextOptions() {
- return { alpha: true };
- }
-
- /*
- ctx は 2D の描画コンテキストで
- HTML5 Canvas API のサブセットです。
- */
- paint(ctx) {
- ctx.fillStyle = 'hsla(55, 90%, 60%, 1.0)';
- ctx.fillRect(0, 15, 200, 20); /* 順序: x, y, w, h */
- }
-});
-
-このクラスの例では、contextOptions() を用いて 1 つだけコンテキストオプションを定義しています。そこではアルファ透明度を許可するシンプルなオブジェクトを返しています。
それでは paint() 関数を用いてキャンバスに描画していきます。
paint() 関数は 3 つの引数を持てます。ここでは最初の引数だけ渡していて、それはレンダリングコンテキスト(後ほど詳しく説明します)といい、ふつう ctx という変数名で表されます。2D レンダリングコンテキストは HTML5 Canvas API のサブセットで、Houdini (PaintRenderingContext2Dと呼ばれる) で利用可能なバージョンはCanvas APIのほとんどすべての機能を含むサブセットですが、そのうち CanvasImageData, CanvasUserInterface, CanvasText, CanvasTextDrawingStyles の各 API は 除かれています。
黄色の影をつくるために fillStyle を hsla(55, 90%, 60%, 1.0) と定義し、その色の矩形を作成するために fillRect() を呼び出します。fillRect() のパラメータは、順に x 軸原点、y 軸原点、幅、高さです。fillRect(0, 15, 200, 20) は、幅 200 単位、高さ 20 単位の矩形を、コンテンツボックスの左端から 0 単位、上端から 15 単位に作成します。
CSS の background-size と background-position プロパティを使用して、この背景画像のサイズを変更したり、再配置したりすることができますが、これは描画 Worklet で作成した黄色のボックスのデフォルトのサイズと配置です。
この例はシンプルなものにしてみました。より多くのオプションについては、canvas のドキュメントを参照してください。また、このチュートリアルの後半では、少し複雑さを追加しています。
- -描画 Worklet を使用するためには、addModule() を用いて登録し、HTML 内の目的の DOM ノードに適用される CSS セレクターのスタイルに含める必要があります。
描画 Worklet とデザインは、上に示した外部スクリプトで行われました。この Worklet をメインスクリプトから登録する必要があります。
- -CSS.paintWorklet.addModule('nameOfPaintWorkletFile.js');
-
-これは、メイン HTML 内の <script> またはドキュメントからリンクされた外部 JavaScript ファイル内の、描画 Worklet の addModule() メソッドを使用して行うことができます。
以下の例では、描画 Worklet は Github でホストしています。
- -CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/01partOne/header-highlight.js');
-
-登録された描画 Worklet ができたら、それをCSSで使用することができます。他の <image> タイプと同様に CSS の paint() 関数を使用し、 描画 Worklet の registerPaint() 関数でセットしたのと同じ文字列識別子を使用してください。
.fancy {
- background-image: paint(headerHighlight);
-}
-
-そして、ページ上の任意の要素に fancy クラスを追加して、背景として黄色のボックスを追加することができます。
- -<h1 class="fancy">My Cool Header</h1>- -
以下の例は、CSS Painting API をサポートしているブラウザーでは上の画像のようになります。
-{{EmbedLiveSample("paintapi", 120, 120)}}
- -ワークレットのスクリプトを弄ることはできませんが、背景画像のサイズと位置を変更するために、background-size と background-position を変更することができます。
上の例では、20×200 の単位のボックスを作成し、要素の上端から 15 単位を塗りつぶしました。これは要素の大きさに関係なく同じです。テキストが小さい場合、黄色のボックスは巨大なアンダーラインのように見えます。文字が大きい場合は、最初の 3 文字の上にバーがあるように見えるかもしれません。 背景画像が要素のサイズと相対的なものであればより良いでしょう — 要素の paintSize プロパティを使用して、背景画像が要素のボックスモデルのサイズに比例するようにすることができます。
上の画像では、背景は要素の大きさに比例しています。3 番目の例では、ブロックレベルの要素に width: 50%; を設定しているため、要素が狭くなり、その結果、背景画像が狭くなります。
これを行うためのコードは次のようになります:
- -registerPaint('headerHighlight', class {
-
- static get contextOptions() {
- return { alpha: true };
- }
-
- /*
- ctx は 2D 描画コンテキスト
- size は paintSize, 描画するボックスの高さ(height)と幅(width)を持つ
- */
-
- paint(ctx, size) {
- ctx.fillStyle = 'hsla(55, 90%, 60%, 1.0)';
- ctx.fillRect( 0, size.height / 3, size.width * 0.4, size.height * 0.6 );
- }
-});
-
-このコード例は、最初の例とは 2 つの違いがあります:
- -paint() の第 2 引数として描画サイズを使用しています。paint() に第 2 引数を渡すことで、.width と .height プロパティを使って要素の幅と高さにアクセスすることができます。
私たちのヘッダーは、サイズに応じてハイライトが変化するようになりました。
- -CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/02partTwo/header-highlight.js');
-
-.fancy {
- background-image: paint(headerHighlight);
-}
-.half {
- width: 50%;
-}
-
-<h1 class="fancy">Largest Header</h1> -<h6 class="fancy">Smallest Header</h6> -<h3 class="fancy half">50% width header</h3> --
Worklet のスクリプトをいじることはできませんが、要素の font-size と width を変更して背景画像のサイズを変更できます。
以下の例は、CSS Painting API をサポートしているブラウザーでは上の画像のようになります。
- -{{EmbedLiveSample("example2", 300, 300)}}
- -Worklet は、要素のサイズにアクセスするだけでなく、CSS のカスタムプロパティや通常のCSS プロパティにもアクセスすることができます。
- -registerPaint('cssPaintFunctionName', class {
- static get inputProperties() { return ['PropertyName1', '--customPropertyName2']; }
- static get inputArguments() { return ['<color>']; }
- static get contextOptions() { return {alpha: true}; }
-
- paint(drawingContext, elementSize, styleMap) {
- // 描画コードはここに書く
- }
-});
-
-
-paint() 関数の 3 つの引数には、描画コンテキスト、描画サイズ、プロパティが含まれます。プロパティにアクセスできるようにするために、静的な inputProperties() メソッドをインクルードしています。これは、通常のプロパティやカスタムプロパティを含む CSS プロパティへの動的なアクセスを提供し、プロパティ名の array を返します。最後にinputArguments について見ていきます。
3 種類の色と 3 種類の幅の間で周回する背景画像を使って、項目一覧を作成してみましょう。
- -
この CSS では、--boxColor と --widthSubtractor のカスタム プロパティを使用して、作成した背景ボックスの色と幅の減算器を指定しています。
li {
- background-image: paint(boxbg);
- --boxColor: hsla(55, 90%, 60%, 1.0);
-}
-
-li:nth-of-type(3n) {
- --boxColor: hsla(155, 90%, 60%, 1.0);
- --widthSubtractor: 20;
-}
-
-li:nth-of-type(3n+1) {
- --boxColor: hsla(255, 90%, 60%, 1.0);
- --widthSubtractor: 40;
-}
-Worklet ではこれらのカスタムプロパティを参照することができます。
- -registerPaint('boxbg', class {
-
- static get contextOptions() { return {alpha: true}; }
-
- /*
- この関数を使用して、要素に対して定義されているカスタムプロパティ (または 'height' のような
- 通常のプロパティ) を取得します。指定された配列で返します。
- */
- static get inputProperties() { return ['--boxColor', '--widthSubtractor']; }
-
- paint(ctx, size, props) {
- /*
- ctx -> 描画コンテキスト
- size -> paintSize: 幅と高さ
- props -> properties: get() メソッド
- */
-
- ctx.fillStyle = props.get('--boxColor');
- ctx.fillRect(0, size.height/3, size.width*0.4 - props.get('--widthSubtractor'), size.height*0.6);
- }
-});
-
-registerPaint() に渡すクラスの inputProperties() メソッドを使用して、boxbg が適用されている要素に設定されている 2 つのカスタムプロパティの値を取得しました。そしてそれらを paint() 関数内で使用します。inputProperties() メソッドは、カスタムプロパティだけでなく、要素に影響するすべてのプロパティを返すことができます。
<script> 内で Worklet を登録するには以下のようにします:
CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklet/boxbg.js');
-{{EmbedLiveSample("example3", 300, 300)}}
- -Worklet のスクリプトをいじることはできませんが、カスタムプロパティの値を変更して背景画像の色や幅を変更することはできます。
- -これまでの例は、例えば装飾的に生成されたコンテンツを ::before で配置したり、background: linear-gradient(yellow, yellow) 0 15px / 200px 20px no-repeat; とするなど、既存のCSSプロパティを使用する方法で再現することができるので、あまり刺激的には見えないかもしれません。CSS Painting API が面白くて強力なのは、変数を渡して自動的にサイズを変更する複雑な画像を作成できることです。
それではもっと複雑な例を見てみましょう。
- -registerPaint('headerHighlight', class {
- static get inputProperties() { return ['--highColour']; }
- static get contextOptions() { return {alpha: true}; }
-
- paint(ctx, size, props) {
-
- /* どの場所からハイライトを始めるか、寸法をセットする */
- const x = 0;
- const y = size.height * 0.3;
- const blockWidth = size.width * 0.33;
- const highlightHeight = size.height * 0.85;
- const color = props.get('--highColour');
-
- ctx.fillStyle = color;
-
- ctx.beginPath();
- ctx.moveTo( x, y );
- ctx.lineTo( blockWidth, y );
- ctx.lineTo( blockWidth + highlightHeight, highlightHeight );
- ctx.lineTo( x, highlightHeight );
- ctx.lineTo( x, y );
- ctx.closePath();
- ctx.fill();
-
- /* 破線を作成 */
- for (let i = 0; i < 4; i++) {
- let start = i * 2;
- ctx.beginPath();
- ctx.moveTo( (blockWidth) + (start * 10) + 10, y );
- ctx.lineTo( (blockWidth) + (start * 10) + 20, y );
- ctx.lineTo( (blockWidth) + (start * 10) + 20 + (highlightHeight), highlightHeight );
- ctx.lineTo( (blockWidth) + (start * 10) + 10 + (highlightHeight), highlightHeight );
- ctx.lineTo( (blockWidth) + (start * 10) + 10, y );
- ctx.closePath();
- ctx.fill();
- }
- } // paint
-});
-
-ここで作られる画像を背景とする小さな HTML を用意します:
- -<h1 class="fancy">Largest Header</h1> -<h3 class="fancy">Medium size header</h3> -<h6 class="fancy">Smallest Header</h6>- -
それぞれのヘッダーは、それぞれ異なった値の --highColor カスタムプロパティを持つことができます。
.fancy {
- background-image: paint(headerHighlight);
-}
-h1 { --highColour: hsla(155, 90%, 60%, 0.7); }
-h3 { --highColour: hsla(255, 90%, 60%, 0.5); }
-h6 { --highColour: hsla(355, 90%, 60%, 0.3); }
-
-そして、Worklet を登録します
- -CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/03partThree/header-highlight.js');
-
-{{EmbedLiveSample("example4", 300, 300)}}
- -この Worklet そのものを編集することはできませんが、CSS や HTML をいじることはできます。ヘッダーの float と clear を試してみるのはどうでしょう？
上記の背景画像を CSS paint API を使わずに作ってみるのもいいかもしれません。これは可能ですが、作成したい色ごとに異なる、かなり複雑な線形グラデーションを宣言しなければなりません。CSS paint API を使えば、1 つの Worklet を再利用することができ、その場合でも異なる色を渡すことができます。
-CSS Paint API を使用すると、カスタムプロパティや通常のプロパティにアクセスできるだけでなく、カスタム引数を paint() 関数に渡すこともできます。
CSS で関数を呼び出すときに、これらの引数を追加することができます。例えばある時、背景を塗りつぶすのではなく、背景をなぞるようにしたいとしましょう — そのために追加の引数を加えておきましょう。
- -li {
- background-image: paint(hollowHighlights, stroke);
-}
-
-
-これで、registerPaint() に渡されるクラスの inputArguments() メソッドを使用して、paint() 関数に追加したカスタム引数にアクセスできるようになりました。
static get inputArguments() { return ['*']; }
-
-
-実際にアクセスするにはこうします。
- -paint(ctx, size, props, args) {
-
- // カスタム引数を使う
- const hasStroke = args[0].toString();
-
- // stroke 引数が 'stroke' の場合は塗りつぶしはしません
- if (hasStroke === 'stroke') {
- ctx.fillStyle = 'transparent';
- ctx.strokeStyle = colour;
- }
- ...
-}
-
-2 つ以上の引数も渡せます。
- -li {
- background-image: paint(hollowHighlights, stroke, 10px);
-}
-
-
-また、特定のタイプの引数を指定することもできます。引数の値をリストで get する際に、特に <length> で単位を指定します。
static get inputArguments() { return ['*', '<length>']; }
-
-この場合は <length> 属性を要求しました。返される配列の最初の要素は CSSUnparsedValue です。2 番目の要素は CSSStyleValue です。
カスタム引数がユニットなどの CSS 値である場合、registerPaint() 関数で取得する際にvalue type キーワードを使用することで、Typed OM CSSStyleValue クラス (およびサブクラス) を呼び出すことができます。
それではストロークの幅を何ピクセルにするか、2 番目の引数を追加してみましょう:
- -li {
- background-image: paint(hollowHighlights, stroke, 10px);
-}
-
-
-引数の値をリストで get する際に、<length> 単位を要求します。
static get inputArguments() { return ['*', '<length>']; }
-
-
-これで型と値のプロパティにアクセスできるようになりました。つまり箱から出してすぐにピクセル数と数値型を取得できるということです。(確かに ctx.lineWidth は、長さの単位を持つ値ではなく float を値として受け取りますが、これは例ですから...)
paint(ctx, size, props, args) {
-
- const strokeWidth = args[1];
-
- if (strokeWidth.unit === 'px') {
- ctx.lineWidth = strokeWidth.value;
- } else {
- ctx.lineWidth = 1.0;
- }
-
- ...
-}
-
-
-この Worklet のさまざまな部分を制御するためにカスタムプロパティを使用することと、ここに記載されている引数との違いに注目する価値があります。カスタムプロパティ (および実際にはスタイルマップ上のすべてのプロパティ) はグローバルなもので、CSS (および JS) 内の他の場所で使用することができます。
- -例えば paint() 関数内で色を設定するために --mainColor を用意するのは便利ですが、これは CSS の他の場所で色を設定するのにも使えます。これを paint のためだけに特別に変更したい場合は、かなり難しいかもしれません。そこで便利なのがカスタム引数です。もう一つの考え方としては、引数は実際に描画するものを制御するために設定され、プロパティはスタイルを制御するために設定されるということです。
これでこの API の本当のメリットが見えてきました。カスタムプロパティと paint() 関数の引数の両方を使って CSS から無数の描画パラメータを制御できるようになれば、再利用可能で制御性の高いスタイリング関数を作り始めることができます。
registerPaint('hollowHighlights', class {
-
- static get inputProperties() { return ['--boxColor']; }
- // `paint` 関数に渡されるカスタム引数
- static get inputArguments() { return ['*','']; }
-
- static get contextOptions() { return {alpha: true}; }
-
- paint(ctx, size, props, args) {
- // ctx -> 描画コンテキスト
- // size -> 描画したいボックスの大きさ
- // props -> 要素に存在するカスタププロパティのリスト
- // args -> cssから paint() 関数を呼ばれた際のカスタム引数のリスト
-
- // どの場所からハイライトを始めるか、寸法
- const x = 0;
- const y = size.height * 0.3;
- const blockWidth = size.width * 0.33;
- const blockHeight = size.height * 0.85;
-
- // CSS から paint() 関数に渡された値
- const colour = props.get( '--boxColor' );
- const strokeType = args[0].toString();
- const strokeWidth = parseInt(args[1]);
-
-
- // 線幅を設定する
- if ( strokeWidth ) {
- ctx.lineWidth = strokeWidth;
- } else {
- ctx.lineWidth = 1.0;
- }
- // 塗りつぶしタイプを設定する
- if ( strokeType === 'stroke' ) {
- ctx.fillStyle = 'transparent';
- ctx.strokeStyle = colour;
- } else if ( strokeType === 'filled' ) {
- ctx.fillStyle = colour;
- ctx.strokeStyle = colour;
- } else {
- ctx.fillStyle = 'none';
- ctx.strokeStyle = 'none';
- }
-
- // 四角
- ctx.beginPath();
- ctx.moveTo( x, y );
- ctx.lineTo( blockWidth, y );
- ctx.lineTo( blockWidth + blockHeight, blockHeight );
- ctx.lineTo( x, blockHeight );
- ctx.lineTo( x, y );
- ctx.closePath();
- ctx.fill();
- ctx.stroke();
- // 破線
- for (let i = 0; i < 4; i++) {
- let start = i * 2;
- ctx.beginPath();
- ctx.moveTo( blockWidth + (start * 10) + 10, y);
- ctx.lineTo( blockWidth + (start * 10) + 20, y);
- ctx.lineTo( blockWidth + (start * 10) + 20 + blockHeight, blockHeight);
- ctx.lineTo( blockWidth + (start * 10) + 10 + blockHeight, blockHeight);
- ctx.lineTo( blockWidth + (start * 10) + 10, y);
- ctx.closePath();
- ctx.fill();
- ctx.stroke();
- }
-
- } // paint
-});
-
-
-私たちは、異なる色、線幅を設定し、背景画像が塗りつぶされるべきか、中空になるべきかを選択することができます:
- -li {
- --boxColor: hsla(155, 90%, 60%, 0.5);
- background-image: paint(hollowHighlights, stroke, 5px);
-}
-
-li:nth-of-type(3n) {
- --boxColor: hsla(255, 90%, 60%, 0.5);
- background-image: paint(hollowHighlights, filled, 3px);
-}
-
-li:nth-of-type(3n+1) {
- --boxColor: hsla(355, 90%, 60%, 0.5);
- background-image: paint(hollowHighlights, stroke, 1px);
-}
-
-
-
-私たちの作った Worklet を登録するには以下のようにします:
- -CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hollow.js');
-{{EmbedLiveSample("example5", 300, 300)}}
- -{{ APIRef("CSSOM") }} {{deprecated_header}}
- -CSSStyleDeclaration.getPropertyCSSValue() メソッドインターフェイスは、プロパティの CSS 値を含む {{domxref('CSSValue')}} を返します。プロパティ名が一括指定プロパティの場合は null を返すことに注意して下さい。
注: このインターフェースは、型付けされた CSS オブジェクトモデルを作成する試みの一部でした。この試みは放棄されており、ほとんどのブラウザーは実装していません。
-この目的を達成するには、以下のものを使用することができます。
-var value = style.getPropertyCSSValue(property);- -
property は、取得するプロパティ名を表す {{domxref('DOMString')}} です。value は、プロパティの CSS 値を含む {{domxref('CSSValue')}} です。存在しない場合は null を返します。次の JavaScript コードは、 CSS の color プロパティの計算済みの RGB 値を含むオブジェクトを取得します。
var style = window.getComputedStyle(elem, null);
-var rgbObj = style.getPropertyCSSValue('color').getRGBColorValue();
-
-
-この機能はもともと、 DOM Style Level 2 仕様書で定義されていましたが、それ以降の標準化の取り組みからは外れています。
- -この機能は、最新の、しかし互換性のない、 CSS Typed Object Model API に取って代わられ、現在は標準化されています。
- -{{Compat}}
diff --git a/files/ja/web/api/cssstyledeclaration/getpropertycssvalue/index.md b/files/ja/web/api/cssstyledeclaration/getpropertycssvalue/index.md new file mode 100644 index 00000000000000..01016dcc351e75 --- /dev/null +++ b/files/ja/web/api/cssstyledeclaration/getpropertycssvalue/index.md @@ -0,0 +1,55 @@ +--- +title: CSSStyleDeclaration.getPropertyCSSValue() +slug: Web/API/CSSStyleDeclaration/getPropertyCSSValue +tags: + - API + - CSSOM + - Method + - Deprecated + - Reference +translation_of: Web/API/CSSStyleDeclaration/getPropertyCSSValue +browser-compat: api.CSSStyleDeclaration.getPropertyCSSValue +--- +{{ APIRef("CSSOM") }} {{deprecated_header}} + +**CSSStyleDeclaration.getPropertyCSSValue()** メソッドインターフェイスは、プロパティの CSS 値を含む {{domxref('CSSValue')}} を返します。プロパティ名が一括指定プロパティの場合は `null` を返すことに注意して下さい。 + +> **Note:** **注:** このインターフェースは、型付けされた CSS オブジェクトモデルを作成する試みの一部でした。この試みは放棄されており、ほとんどのブラウザーは実装していません。 +> +> この目的を達成するには、以下のものを使用することができます。 +> +> - {{domxref("CSSStyleDeclaration.getPropertyValue()")}} が型付けなしの [CSS オブジェクトモデル](/ja/docs/Web/API/CSS_Object_Model)にあり、広く対応されています。 +> - {{domxref("Element.computedStyleMap()")}} が最近の [CSS 型付きオブジェクトモデル API](/ja/docs/Web/API/CSS_Typed_OM_API) にありますが、対応が少なく実験的なものと考えられています。 + +## 構文 + +```js +var value = style.getPropertyCSSValue(property); +``` + +### 引数 + +- _`property`_ は、取得するプロパティ名を表す {{domxref('DOMString')}} です。 + +### 返値 + +- `value` は、プロパティの CSS 値を含む {{domxref('CSSValue')}} です。存在しない場合は `null` を返します。 + +## 例 + +次の JavaScript コードは、 CSS の `color` プロパティの計算済みの RGB 値を含むオブジェクトを取得します。 + +```js +var style = window.getComputedStyle(elem, null); +var rgbObj = style.getPropertyCSSValue('color').getRGBColorValue(); +``` + +## 仕様書 + +この機能はもともと、 [DOM Style Level 2](https://www.w3.org/TR/DOM-Level-2-Style) 仕様書で定義されていましたが、それ以降の標準化の取り組みからは外れています。 + +この機能は、最新の、しかし互換性のない、 [CSS Typed Object Model API](/ja/docs/Web/API/CSS_Typed_OM_API) に取って代わられ、現在は標準化されています。 + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/cssstyledeclaration/getpropertypriority/index.html b/files/ja/web/api/cssstyledeclaration/getpropertypriority/index.html deleted file mode 100644 index 190d7115e68b0e..00000000000000 --- a/files/ja/web/api/cssstyledeclaration/getpropertypriority/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: CSSStyleDeclaration.getPropertyPriority() -slug: Web/API/CSSStyleDeclaration/getPropertyPriority -tags: -- API -- CSSOM -- Method -- Reference -browser-compat: api.CSSStyleDeclaration.getPropertyPriority -translation_of: Web/API/CSSStyleDeclaration/getPropertyPriority ---- -{{ APIRef("CSSOM") }}
- -CSSStyleDeclaration.getPropertyPriority() メソッドインターフェイスは、 {{domxref('DOMString')}} でその CSS プロパティに明示的に設定されたすべての優先度を返します。
- -var priority = style.getPropertyPriority(property);- -
property は {{domxref('DOMString')}} で、チェックするプロパティ名を表します。priority は {{domxref('DOMString')}} で、存在する場合は優先度 ("important" など) を表します。存在しない場合は、空文字列を返します。以下の JavaScript コードは、 margin が CSS セレクターの規則で important と記されているかどうかをチェックします。
var declaration = document.styleSheets[0].cssRules[0].style;
-var isImportant = declaration.getPropertyPriority('margin') === 'important';
-
-
-{{Compat}}
diff --git a/files/ja/web/api/cssstyledeclaration/getpropertypriority/index.md b/files/ja/web/api/cssstyledeclaration/getpropertypriority/index.md new file mode 100644 index 00000000000000..dff2cb03345764 --- /dev/null +++ b/files/ja/web/api/cssstyledeclaration/getpropertypriority/index.md @@ -0,0 +1,45 @@ +--- +title: CSSStyleDeclaration.getPropertyPriority() +slug: Web/API/CSSStyleDeclaration/getPropertyPriority +tags: + - API + - CSSOM + - Method + - Reference +translation_of: Web/API/CSSStyleDeclaration/getPropertyPriority +browser-compat: api.CSSStyleDeclaration.getPropertyPriority +--- +{{ APIRef("CSSOM") }} + +**CSSStyleDeclaration.getPropertyPriority()** メソッドインターフェイスは、 {{domxref('DOMString')}} でその CSS プロパティに明示的に設定されたすべての優先度を返します。 + +## 構文 + +```js +var priority = style.getPropertyPriority(property); +``` + +### 引数 + +- _`property`_ は {{domxref('DOMString')}} で、チェックするプロパティ名を表します。 + +### 返値 + +- `priority` は {{domxref('DOMString')}} で、存在する場合は優先度 (`"important"` など) を表します。存在しない場合は、空文字列を返します。 + +## 例 + +以下の JavaScript コードは、 `margin` が CSS セレクターの規則で important と記されているかどうかをチェックします。 + +```js +var declaration = document.styleSheets[0].cssRules[0].style; +var isImportant = declaration.getPropertyPriority('margin') === 'important'; +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/cssstyledeclaration/getpropertyvalue/index.html b/files/ja/web/api/cssstyledeclaration/getpropertyvalue/index.html deleted file mode 100644 index 268a16bb173267..00000000000000 --- a/files/ja/web/api/cssstyledeclaration/getpropertyvalue/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: CSSStyleDeclaration.getPropertyValue() -slug: Web/API/CSSStyleDeclaration/getPropertyValue -tags: -- API -- CSSOM -- Method -- Reference -browser-compat: api.CSSStyleDeclaration.getPropertyValue -translation_of: Web/API/CSSStyleDeclaration/getPropertyValue ---- -{{ APIRef("CSSOM") }}
- -CSSStyleDeclaration.getPropertyValue() メソッドインターフェイスは、指定された CSS プロパティの値を含む {{domxref('DOMString')}} を返します。
- -var value = style.getPropertyValue(property);- -
property は、チェックされるプロパティ名 (ハイフン区切り) を表す {{domxref('DOMString')}} です。value は、プロパティの値を含む {{domxref('DOMString')}} です。設定されていない場合、空文字列を返します。次の JavaScript コードは、 CSS セレクター規則の margin プロパティの値を問い合わせます。
var declaration = document.styleSheets[0].cssRules[0].style;
-var value = declaration.getPropertyValue('margin'); // "1px 2px"
-
-
-{{Compat}}
diff --git a/files/ja/web/api/cssstyledeclaration/getpropertyvalue/index.md b/files/ja/web/api/cssstyledeclaration/getpropertyvalue/index.md new file mode 100644 index 00000000000000..5423b5a46c24b5 --- /dev/null +++ b/files/ja/web/api/cssstyledeclaration/getpropertyvalue/index.md @@ -0,0 +1,45 @@ +--- +title: CSSStyleDeclaration.getPropertyValue() +slug: Web/API/CSSStyleDeclaration/getPropertyValue +tags: + - API + - CSSOM + - Method + - Reference +translation_of: Web/API/CSSStyleDeclaration/getPropertyValue +browser-compat: api.CSSStyleDeclaration.getPropertyValue +--- +{{ APIRef("CSSOM") }} + +**CSSStyleDeclaration.getPropertyValue()** メソッドインターフェイスは、指定された CSS プロパティの値を含む {{domxref('DOMString')}} を返します。 + +## 構文 + +```js +var value = style.getPropertyValue(property); +``` + +### 引数 + +- _`property`_ は、チェックされるプロパティ名 (ハイフン区切り) を表す {{domxref('DOMString')}} です。 + +### 返値 + +- `value` は、プロパティの値を含む {{domxref('DOMString')}} です。設定されていない場合、空文字列を返します。 + +## 例 + +次の JavaScript コードは、 CSS セレクター規則の `margin` プロパティの値を問い合わせます。 + +```js +var declaration = document.styleSheets[0].cssRules[0].style; +var value = declaration.getPropertyValue('margin'); // "1px 2px" +``` + +## Specifications + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/cssstyledeclaration/index.html b/files/ja/web/api/cssstyledeclaration/index.html deleted file mode 100644 index 113bfc6ccc0108..00000000000000 --- a/files/ja/web/api/cssstyledeclaration/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: CSSStyleDeclaration -slug: Web/API/CSSStyleDeclaration -tags: - - API - - CSSOM - - CSSRule - - Interface - - Reference -browser-compat: api.CSSStyleDeclaration -translation_of: Web/API/CSSStyleDeclaration ---- -CSSStyleDeclaration インターフェースは CSS 宣言ブロックのオブジェクトを表し、スタイル情報や様々なスタイルに関するメソッドやプロパティを提供します。
CSSStyleDeclaration オブジェクトは、下記の 3 つの API によって使用されます。
<div style="...">)。document.styleSheets[0].cssRules[0].style は、その文書の最初のスタイルシートの最初の CSS 規則を CSSStyleDeclaration を返します。CSSStyleDeclaration オブジェクトを読み取り専用インターフェイスとして返します。CSSStyleDeclaration の名前付きプロパティ', "", 1)}}nodeList[i] にアクセスすることです (これは i が範囲外であった場合は undefined を返します)。これは JavaScript 以外の DOM 実装の多くで最も有用です。null を返します。var styleObj = document.styleSheets[0].cssRules[0].style;
-console.log(styleObj.cssText);
-
-for (var i = styleObj.length; i--;) {
- var nameString = styleObj[i];
- styleObj.removeProperty(nameString);
-}
-
-console.log(styleObj.cssText);
-
-{{Compat}}
- -CSSStyleDeclaration の名前付きプロパティ', "", 1)}}
+ - : 対応するすべての CSS プロパティを、ダッシュおよびキャメルケースにした属性です。
+
+## メソッド
+
+- {{DOMxRef("CSSStyleDeclaration.getPropertyPriority()")}}
+ - : オプションの優先度、 "important" を返します。
+- {{DOMxRef("CSSStyleDeclaration.getPropertyValue()")}}
+ - : 指定されたプロパティ名のプロパティ値を返します。
+- {{DOMxRef("CSSStyleDeclaration.item()")}}
+ - : 位置から CSS プロパティ名を返します。位置が範囲を超えていた場合は空文字列を返します。
+ 代替方法は `nodeList[i]` にアクセスすることです (これは `i` が範囲外であった場合は `undefined` を返します)。これは JavaScript 以外の DOM 実装の多くで最も有用です。
+- {{DOMxRef("CSSStyleDeclaration.removeProperty()")}}
+ - : CSS 宣言ブロックからプロパティを削除します。
+- {{DOMxRef("CSSStyleDeclaration.setProperty()")}}
+ - : 宣言ブロック内の既存の CSS プロパティを変更するか、新しい CSS プロパティを生成するかします。
+- {{DOMxRef("CSSStyleDeclaration.getPropertyCSSValue()")}} {{deprecated_inline}}
+ - : **Firefox の getComputedStyle のみ対応** プロパティの値を {{DOMxRef("CSSPrimitiveValue")}} として、または[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)では `null` を返します。
+
+## 例
+
+```js
+var styleObj = document.styleSheets[0].cssRules[0].style;
+console.log(styleObj.cssText);
+
+for (var i = styleObj.length; i--;) {
+ var nameString = styleObj[i];
+ styleObj.removeProperty(nameString);
+}
+
+console.log(styleObj.cssText);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS Properties Reference](/ja/docs/Web/CSS/CSS_Properties_Reference)
diff --git a/files/ja/web/api/cssstyledeclaration/item/index.html b/files/ja/web/api/cssstyledeclaration/item/index.html
deleted file mode 100644
index 35b5fd4d1881c4..00000000000000
--- a/files/ja/web/api/cssstyledeclaration/item/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: CSSStyleDeclaration.item()
-slug: Web/API/CSSStyleDeclaration/item
-tags:
-- API
-- CSSOM
-- Method
-- Reference
-browser-compat: api.CSSStyleDeclaration.item
-translation_of: Web/API/CSSStyleDeclaration/item
----
-{{ APIRef("CSSOM") }}
- -CSSStyleDeclaration.item() メソッドインターフェイスは、位置を指定して {{domxref('CSSStyleDeclaration')}} の CSS プロパティ名を返します。このメソッドは与えた値による例外が発生しません。位置が範囲外だった場合は空文字列が返され、引数が与えられなかった場合は TypeError が発生します。
var propertyName = style.item(index); -- -
index は読み取るノードの位置です。位置は 0 から始まります。propertyName は {{domxref('DOMString')}} で、指定された位置にある CSS プロパティの名前を返します。JavaScript には、 NodeList から位置を指定して項目を取得するための簡単な特別な構文があります。 -
- -var propertyName = style[index]; -- -
var style = document.getElementById('div1').style;
-var propertyName = style.item(1); // または style[1] - リスト中の 2 番目のスタイルを返します
-
-{{Compat}}
diff --git a/files/ja/web/api/cssstyledeclaration/item/index.md b/files/ja/web/api/cssstyledeclaration/item/index.md new file mode 100644 index 00000000000000..ab638a4ef8d124 --- /dev/null +++ b/files/ja/web/api/cssstyledeclaration/item/index.md @@ -0,0 +1,49 @@ +--- +title: CSSStyleDeclaration.item() +slug: Web/API/CSSStyleDeclaration/item +tags: + - API + - CSSOM + - Method + - Reference +translation_of: Web/API/CSSStyleDeclaration/item +browser-compat: api.CSSStyleDeclaration.item +--- +{{ APIRef("CSSOM") }} + +`CSSStyleDeclaration.item()` メソッドインターフェイスは、位置を指定して {{domxref('CSSStyleDeclaration')}} の CSS プロパティ名を返します。このメソッドは与えた値による例外が発生しません。位置が範囲外だった場合は空文字列が返され、引数が与えられなかった場合は `TypeError` が発生します。 + +## 構文 + +```js +var propertyName = style.item(index); +``` + +### 引数 + +- _`index`_ は読み取るノードの位置です。位置は 0 から始まります。 + +### 返値 + +- _`propertyName`_ は {{domxref('DOMString')}} で、指定された位置にある CSS プロパティの名前を返します。 + +JavaScript には、 NodeList から位置を指定して項目を取得するための簡単な特別な構文があります。 + +```js +var propertyName = style[index]; +``` + +## 例 + +```js +var style = document.getElementById('div1').style; +var propertyName = style.item(1); // または style[1] - リスト中の 2 番目のスタイルを返します +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/cssstyledeclaration/length/index.html b/files/ja/web/api/cssstyledeclaration/length/index.html deleted file mode 100644 index 8da1caf745b905..00000000000000 --- a/files/ja/web/api/cssstyledeclaration/length/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: CSSStyleDeclaration.length -slug: Web/API/CSSStyleDeclaration/length -tags: -- API -- CSSOM -- Property -- Reference -browser-compat: api.CSSStyleDeclaration.length -translation_of: Web/API/CSSStyleDeclaration/length ---- -{{ APIRef("CSSOM") }}
- -読み取り専用のプロパティで、この CSS 宣言ブロックにあるスタイル宣言の数を整数で表します。
- -var num = styles.length;- -
このインスタンスの親に明示的に設定されているスタイルの数を示す整数です。
- -次の例は、以下の HTML 要素に明示的に設定されたスタイルの数を取得します。 -
- -<div id="div1" style="margin: 0 10px; background-color: #CA1; font-family: monospace"></div>- -
JavaScript コード:
- -var myDiv = document.getElementById('div1'); var divStyle = myDiv.style; var len = divStyle.length; // 6
-
-{{Compat}}
diff --git a/files/ja/web/api/cssstyledeclaration/length/index.md b/files/ja/web/api/cssstyledeclaration/length/index.md new file mode 100644 index 00000000000000..83dcdbbe6c545b --- /dev/null +++ b/files/ja/web/api/cssstyledeclaration/length/index.md @@ -0,0 +1,46 @@ +--- +title: CSSStyleDeclaration.length +slug: Web/API/CSSStyleDeclaration/length +tags: + - API + - CSSOM + - Property + - Reference +translation_of: Web/API/CSSStyleDeclaration/length +browser-compat: api.CSSStyleDeclaration.length +--- +{{ APIRef("CSSOM") }} + +読み取り専用のプロパティで、この CSS 宣言ブロックにあるスタイル宣言の数を整数で表します。 + +## 構文 + +```js +var num = styles.length; +``` + +### 値 + +このインスタンスの親に明示的に設定されているスタイルの数を示す整数です。 + +## 例 + +次の例は、以下の HTML 要素に明示的に設定されたスタイルの数を取得します。 + +```html + +``` + +JavaScript コード: + +``` +var myDiv = document.getElementById('div1'); var divStyle = myDiv.style; var len = divStyle.length; // 6 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/cssstyledeclaration/parentrule/index.html b/files/ja/web/api/cssstyledeclaration/parentrule/index.html deleted file mode 100644 index 01dfdfa632edf2..00000000000000 --- a/files/ja/web/api/cssstyledeclaration/parentrule/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: CSSStyleDeclaration.parentRule -slug: Web/API/CSSStyleDeclaration/parentRule -tags: -- API -- CSSOM -- Property -- Reference -browser-compat: api.CSSStyleDeclaration.parentRule -translation_of: Web/API/CSSStyleDeclaration/parentRule ---- -{{ APIRef("CSSOM") }}
- -CSSStyleDeclaration.parentRule は読み取り専用のプロパティで、このスタイルブロックの親である {{domxref('CSSRule')}} を返します。例えば、 CSS セレクターのスタイルを表す {{domxref('CSSStyleRule')}} です。
- -var rule = styles.parentRule;- -
この宣言ブロックを含む CSS 規則、またはこの {{domxref('CSSStyleDeclaration')}} が {{domxref('CSSRule')}} に割り当てられていない場合は null を返します。
次の JavaScript コードは、 {{domxref('CSSStyleDeclaration')}} から親の CSS スタイル規則を取得します。
- -var declaration = document.styleSheets[0].rules[0].style; -var rule = declaration.parentRule; -- -
{{Compat}}
diff --git a/files/ja/web/api/cssstyledeclaration/parentrule/index.md b/files/ja/web/api/cssstyledeclaration/parentrule/index.md new file mode 100644 index 00000000000000..bb5955375a3ada --- /dev/null +++ b/files/ja/web/api/cssstyledeclaration/parentrule/index.md @@ -0,0 +1,41 @@ +--- +title: CSSStyleDeclaration.parentRule +slug: Web/API/CSSStyleDeclaration/parentRule +tags: + - API + - CSSOM + - Property + - Reference +translation_of: Web/API/CSSStyleDeclaration/parentRule +browser-compat: api.CSSStyleDeclaration.parentRule +--- +{{ APIRef("CSSOM") }} + +**CSSStyleDeclaration.parentRule** は読み取り専用のプロパティで、このスタイルブロックの親である {{domxref('CSSRule')}} を返します。例えば、 CSS セレクターのスタイルを表す {{domxref('CSSStyleRule')}} です。 + +## 構文 + +```js +var rule = styles.parentRule; +``` + +### 値 + +この宣言ブロックを含む CSS 規則、またはこの {{domxref('CSSStyleDeclaration')}} が {{domxref('CSSRule')}} に割り当てられていない場合は `null` を返します。 + +## 例 + +次の JavaScript コードは、 {{domxref('CSSStyleDeclaration')}} から親の CSS スタイル規則を取得します。 + +```js +var declaration = document.styleSheets[0].rules[0].style; +var rule = declaration.parentRule; +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/cssstyledeclaration/removeproperty/index.html b/files/ja/web/api/cssstyledeclaration/removeproperty/index.html deleted file mode 100644 index 9498fe520f20ae..00000000000000 --- a/files/ja/web/api/cssstyledeclaration/removeproperty/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: CSSStyleDeclaration.removeProperty() -slug: Web/API/CSSStyleDeclaration/removeProperty -tags: -- API -- CSSOM -- Method -- Reference -browser-compat: api.CSSStyleDeclaration.removeProperty -translation_of: Web/API/CSSStyleDeclaration/removeProperty ---- -{{ APIRef("CSSOM") }}
- -CSSStyleDeclaration.removeProperty() メソッドインターフェイスは、 CSS スタイル宣言オブジェクトからプロパティを削除します。
var oldValue = style.removeProperty(property);- -
property は {{domxref('DOMString')}} で、削除するプロパティ名を表します。なお、複数語からなるプロパティ名はハイフン区切りであって、キャメルケースではありません。oldValue は {{domxref('DOMString')}} で、削除される前の CSS プロパティの値と等しいものです。次の JavaScript コードは、 CSS の background-color プロパティをセレクター規則から削除します。
var declaration = document.styleSheets[0].rules[0].style;
-var oldValue = declaration.removeProperty('background-color');
-
-
-{{Compat}}
diff --git a/files/ja/web/api/cssstyledeclaration/removeproperty/index.md b/files/ja/web/api/cssstyledeclaration/removeproperty/index.md new file mode 100644 index 00000000000000..1ce25cbe718498 --- /dev/null +++ b/files/ja/web/api/cssstyledeclaration/removeproperty/index.md @@ -0,0 +1,49 @@ +--- +title: CSSStyleDeclaration.removeProperty() +slug: Web/API/CSSStyleDeclaration/removeProperty +tags: + - API + - CSSOM + - Method + - Reference +translation_of: Web/API/CSSStyleDeclaration/removeProperty +browser-compat: api.CSSStyleDeclaration.removeProperty +--- +{{ APIRef("CSSOM") }} + +**`CSSStyleDeclaration.removeProperty()`** メソッドインターフェイスは、 CSS スタイル宣言オブジェクトからプロパティを削除します。 + +## 構文 + +```js +var oldValue = style.removeProperty(property); +``` + +### 引数 + +- _`property`_ は {{domxref('DOMString')}} で、削除するプロパティ名を表します。なお、複数語からなるプロパティ名はハイフン区切りであって、キャメルケースではありません。 + +### 返値 + +- `oldValue` は {{domxref('DOMString')}} で、削除される前の CSS プロパティの値と等しいものです。 + +### 例外 + +- {{domxref('DOMException')}} NO_MODIFICATION_ALLOWED_ERR: プロパティまたは宣言ブロックが読取専用の場合。 + +## 例 + +次の JavaScript コードは、 CSS の `background-color` プロパティをセレクター規則から削除します。 + +```js +var declaration = document.styleSheets[0].rules[0].style; +var oldValue = declaration.removeProperty('background-color'); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/cssstyledeclaration/setproperty/index.html b/files/ja/web/api/cssstyledeclaration/setproperty/index.html deleted file mode 100644 index 332e2b5fcb5652..00000000000000 --- a/files/ja/web/api/cssstyledeclaration/setproperty/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: CSSStyleDeclaration.setProperty() -slug: Web/API/CSSStyleDeclaration/setProperty -tags: -- API -- CSSOM -- Method -- Reference -browser-compat: api.CSSStyleDeclaration.setProperty -translation_of: Web/API/CSSStyleDeclaration/setProperty ---- -{{ APIRef("CSSOM") }}
- -CSSStyleDeclaration.setProperty() メソッドインターフェイスは、 CSS スタイル宣言オブジェクトのプロパティに新しい値を設定します。
style.setProperty(propertyName, value, priority);- -
propertyName は {{domxref('DOMString')}} で、変更する CSS プロパティ名 (ハイフン区切り) です。value {{optional_inline}} は
- {{domxref('DOMString')}} で、新しいプロパティ値が入ります。指定されなかった場合は、空文字列として扱われます。
- value は "!important" を含んではいけません。 --
- これは priority 引数を使用して設定してください。priority {{optional_inline}} は
- {{domxref('DOMString')}} で、 CSS の優先度 "important" を設定することができます。指定されなかった場合は、空文字列として扱われます。以下の値を受け付けます。
- "important"undefined""priority が省略できる場合、 JavaScript にはスタイル宣言オブジェクトの CSS プロパティの設定に特別な簡単な構文があります。
style.cssPropertyName = 'value';- -
この例では、 3 つのボタンが用意されており、これらのボタンを押すことで、ボックス段落の境界、背景色、テキスト色をランダムな値に動的に変更することができます (この節の最後にあるライブサンプルを参照)。
- -変更したい規則は、このページに適用されている 2 つ目のスタイルシートに含まれていることが分かっているので、 document.styleSheets[1] を使ってその参照を取得します。次に、 stylesheet.cssRules の配列に含まれている、スタイルシート内のさまざまな規則を反復処理します。それぞれの規則について、 CSSStyleRule.selectorText プロパティがセレクター .box p と等しいかどうかを確認します。
等しい場合、この CSSStyleRule オブジェクトへの参照を変数に格納します。次に、 3 つの関数を使って問題のプロパティにランダムな値を生成し、これらの値で規則を更新します。それぞれの場合において、これは setProperty() メソッドで行います (boxParaRule.style.setProperty('border', newBorder); のように)。
<div class="controls"> - <button class="border">Border</button> - <button class="bgcolor">Background</button> - <button class="color">Text</button> -</div> -<div class="box"> - <p>Box</p> -</div>- -
html {
- background: orange;
- font-family: sans-serif;
- height: 100%;
-}
-
-body {
- height: inherit;
- width: 80%;
- min-width: 500px;
- max-width: 1000px;
- margin: 0 auto;
-}
-
-.controls {
- display: flex;
- justify-content: space-around;
- align-items: center;
-}
-
-div button {
- flex: 1;
- margin: 20px;
- height: 30px;
- line-height: 30px;
-}
-
-.box {
- display: flex;
- justify-content: center;
- align-items: center;
- height: calc(100% - 70px);
-}
-
-.box p {
- width: 50%;
- text-align: center;
- font-weight: bold;
- font-size: 40px;
- height: 150px;
- line-height: 150px;
- background: red;
- border: 5px solid purple;
- color: white;
- transition: all 1s;
-}
-
-const borderBtn = document.querySelector('.border');
-const bgColorBtn = document.querySelector('.bgcolor');
-const colorBtn = document.querySelector('.color');
-const box = document.querySelector('.box');
-
-function random(min,max) {
- const num = Math.floor(Math.random()*(max-min)) + min;
- return num;
-}
-
-function randomColor() {
- return 'rgb(' + random(0,255) + ', ' + random(0,255) + ', ' + random(0,255) + ')';
-}
-
-const stylesheet = document.styleSheets[1];
-let boxParaRule;
-
-for(let i = 0; i < stylesheet.cssRules.length; i++) {
- if(stylesheet.cssRules[i].selectorText === '.box p') {
- boxParaRule = stylesheet.cssRules[i];
- }
-}
-
-function setRandomBorder() {
- const newBorder = random(1, 50) + 'px solid ' + randomColor();
- boxParaRule.style.setProperty('border', newBorder);
-}
-
-function setRandomBgColor() {
- const newBgColor = randomColor();
- boxParaRule.style.setProperty('background-color', newBgColor);
-}
-
-function setRandomColor() {
- const newColor = randomColor();
- boxParaRule.style.setProperty('color', newColor);
-}
-
-borderBtn.addEventListener('click', setRandomBorder);
-bgColorBtn.addEventListener('click', setRandomBgColor);
-colorBtn.addEventListener('click', setRandomColor);
-
-{{EmbedLiveSample('Examples', '100%', 400)}}
- -{{Compat}}
diff --git a/files/ja/web/api/cssstyledeclaration/setproperty/index.md b/files/ja/web/api/cssstyledeclaration/setproperty/index.md new file mode 100644 index 00000000000000..a2780f69245d20 --- /dev/null +++ b/files/ja/web/api/cssstyledeclaration/setproperty/index.md @@ -0,0 +1,180 @@ +--- +title: CSSStyleDeclaration.setProperty() +slug: Web/API/CSSStyleDeclaration/setProperty +tags: + - API + - CSSOM + - Method + - Reference +translation_of: Web/API/CSSStyleDeclaration/setProperty +browser-compat: api.CSSStyleDeclaration.setProperty +--- +{{ APIRef("CSSOM") }} + +**`CSSStyleDeclaration.setProperty()`** メソッドインターフェイスは、 CSS スタイル宣言オブジェクトのプロパティに新しい値を設定します。 + +## 構文 + +```js +style.setProperty(propertyName, value, priority); +``` + +### 引数 + +- _`propertyName`_ は {{domxref('DOMString')}} で、変更する CSS プロパティ名 (ハイフン区切り) です。 +- _`value`_ {{optional_inline}} は + {{domxref('DOMString')}} で、新しいプロパティ値が入ります。指定されなかった場合は、空文字列として扱われます。 + + - 注: _`value`_ は `"!important"` を含んではいけません。 -- + これは _`priority`_ 引数を使用して設定してください。 + +- _`priority`_ {{optional_inline}} は + {{domxref('DOMString')}} で、 CSS の優先度 "important" を設定することができます。指定されなかった場合は、空文字列として扱われます。以下の値を受け付けます。 + + - 文字列値 `"important"` + - キーワード `undefined` + - 空文字列値 `""` + +### 返値 + +- {{jsxref('undefined')}} + +### 例外 + +- {{domxref('DOMException')}} (NoModificationAllowedError): このプロパティまたは宣言ブロックが読み取り専用であった場合。 + +_`priority`_ が省略できる場合、 JavaScript にはスタイル宣言オブジェクトの CSS プロパティの設定に特別な簡単な構文があります。 + +```js +style.cssPropertyName = 'value'; +``` + +## 例 + +この例では、 3 つのボタンが用意されており、これらのボタンを押すことで、ボックス段落の境界、背景色、テキスト色をランダムな値に動的に変更することができます (この節の最後にあるライブサンプルを参照)。 + +変更したい規則は、このページに適用されている 2 つ目のスタイルシートに含まれていることが分かっているので、 [`document.styleSheets[1]`](/ja/docs/Web/API/Document/styleSheetSets) を使ってその参照を取得します。次に、 [`stylesheet.cssRules`](/ja/docs/Web/API/CSSStyleSheet/cssRules) の配列に含まれている、スタイルシート内のさまざまな規則を反復処理します。それぞれの規則について、 [`CSSStyleRule.selectorText`](/ja/docs/Web/API/CSSStyleRule/selectorText) プロパティがセレクター `.box p` と等しいかどうかを確認します。 + +等しい場合、この `CSSStyleRule` オブジェクトへの参照を変数に格納します。次に、 3 つの関数を使って問題のプロパティにランダムな値を生成し、これらの値で規則を更新します。それぞれの場合において、これは `setProperty()` メソッドで行います (`boxParaRule.style.setProperty('border', newBorder);` のように)。 + +### HTML + +```html +Box
+{{ APIRef("CSSOM") }}
- -CSSStyleRule は、単一の CSS スタイル規則を表します。これは、型定数の値が 1 (CSSRule.STYLE_RULE) の {{domxref("CSSRule")}} インターフェイスを実装します。
"h1,h2"| 仕様書 | -状態 | -備考 | -
|---|---|---|
| {{ SpecName('CSSOM', '#the-cssstylerule-interface', 'CSSStyleRule') }} | -{{ Spec2('CSSOM') }} | -変更なし | -
| {{ SpecName('DOM2 Style', 'css.html#CSS-CSSStyleRule', 'CSSRule') }} | -{{ Spec2('DOM2 Style') }} | -- |
{{Compat("api.CSSStyleRule")}}
diff --git a/files/ja/web/api/cssstylerule/index.md b/files/ja/web/api/cssstylerule/index.md new file mode 100644 index 00000000000000..f2211b7300d8f0 --- /dev/null +++ b/files/ja/web/api/cssstylerule/index.md @@ -0,0 +1,34 @@ +--- +title: CSSStyleRule +slug: Web/API/CSSStyleRule +tags: + - API + - CSSOM + - CSSStyleRule + - Interface + - Reference +translation_of: Web/API/CSSStyleRule +--- +{{ APIRef("CSSOM") }} + +**`CSSStyleRule`** は、単一の CSS スタイル規則を表します。これは、型定数の値が `1` (`CSSRule.STYLE_RULE`) の {{domxref("CSSRule")}} インターフェイスを実装します。 + +## プロパティ + +- {{domxref("CSSStyleRule.selectorText")}} + - : この規則のセレクターのテキスト表現を返します。例: `"h1,h2"` +- {{domxref("CSSStyleRule.style")}} {{readonlyinline}} + - : この規則の {{domxref("CSSStyleDeclaration")}} オブジェクトを返します。 +- {{domxref("CSSStyleRule.styleMap")}} {{readonlyinline}} + - : {{domxref('StylePropertyMap')}} オブジェクトを返し、これによってこの規則のプロパティと値の組へアクセスできます。 + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| -------------------------------------------------------------------------------------------- | -------------------------------- | -------- | +| {{ SpecName('CSSOM', '#the-cssstylerule-interface', 'CSSStyleRule') }} | {{ Spec2('CSSOM') }} | 変更なし | +| {{ SpecName('DOM2 Style', 'css.html#CSS-CSSStyleRule', 'CSSRule') }} | {{ Spec2('DOM2 Style') }} | | + +## ブラウザーの互換性 + +{{Compat("api.CSSStyleRule")}} diff --git a/files/ja/web/api/cssstylerule/selectortext/index.html b/files/ja/web/api/cssstylerule/selectortext/index.html deleted file mode 100644 index 4ba92cd77ec22d..00000000000000 --- a/files/ja/web/api/cssstylerule/selectortext/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: CSSStyleRule.selectorText -slug: Web/API/CSSStyleRule/selectorText -tags: - - API - - CSSOM - - CSSStyleRule - - Reference -translation_of: Web/API/CSSStyleRule/selectorText ---- -CSSRule.selectorTextプロパティは、この規則集合のセレクターのテキスト表現を取得します。これは、一部のブラウザーで読み取り専用で実装されています。スタイルシート規則をクロスブラウザーで動的に設定するには、 動的なスタイル情報の利用 を参照してください。
string = cssRule.selectorText- -
// for cssrule: body { background-color: darkblue; }
-var stylesheet = document.styleSheets[0];
-
-alert(stylesheet.cssRules[0].selectorText); // body
-
-
-実装は、セレクターの解析中に無意味な空白を取り除くことがあります。解析できないセレクター文字列を設定すると、SyntaxError が発生します。
- -| 仕様書 | -策定状況 | -コメント | -
|---|---|---|
| {{SpecName('CSSOM', '#dom-cssstylerule-selectortext', 'CSSStyleRule.selectorText')}} | -{{Spec2('CSSOM')}} | -- |
{{Compat("api.CSSStyleRule.selectorText")}}
diff --git a/files/ja/web/api/cssstylerule/selectortext/index.md b/files/ja/web/api/cssstylerule/selectortext/index.md new file mode 100644 index 00000000000000..14895fa9e487b9 --- /dev/null +++ b/files/ja/web/api/cssstylerule/selectortext/index.md @@ -0,0 +1,42 @@ +--- +title: CSSStyleRule.selectorText +slug: Web/API/CSSStyleRule/selectorText +tags: + - API + - CSSOM + - CSSStyleRule + - Reference +translation_of: Web/API/CSSStyleRule/selectorText +--- +{{APIRef("CSSOM") }} + +**`CSSRule.selectorText`** プロパティは、この規則集合のセレクターのテキスト表現を取得します。これは、一部のブラウザーで読み取り専用で実装されています。スタイルシート規則をクロスブラウザーで動的に設定するには、 [動的なスタイル情報の利用](/ja/docs/DOM/Using_dynamic_styling_information) を参照してください。 + +## 構文 + +``` +string = cssRule.selectorText +``` + +## 例 + +```js +// for cssrule: body { background-color: darkblue; } +var stylesheet = document.styleSheets[0]; + +alert(stylesheet.cssRules[0].selectorText); // body +``` + +## 補記 + +実装は、セレクターの解析中に無意味な空白を取り除くことがあります。解析できないセレクター文字列を設定すると、SyntaxError が発生します。 + +## 仕様書 + +| 仕様書 | 策定状況 | コメント | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------ | -------- | +| {{SpecName('CSSOM', '#dom-cssstylerule-selectortext', 'CSSStyleRule.selectorText')}} | {{Spec2('CSSOM')}} | | + +## ブラウザー実装状況 + +{{Compat("api.CSSStyleRule.selectorText")}} diff --git a/files/ja/web/api/cssstylerule/style/index.html b/files/ja/web/api/cssstylerule/style/index.html deleted file mode 100644 index 7d3f91c398babc..00000000000000 --- a/files/ja/web/api/cssstylerule/style/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: CSSStyleRule.style -slug: Web/API/CSSStyleRule/style -tags: - - API - - CSSOM - - Property - - Reference -translation_of: Web/API/CSSStyleRule/style ---- -{{ APIRef("CSSOM") }}
- -CSSRule.style プロパティは、{{DOMXref("CSSRule")}} の 宣言ブロック のための {{domxref("CSSStyleDeclaration")}} インターフェイスです。
styleObj = cssRule.style- -
function stilo() {
- alert(document.styleSheets[0].cssRules[0].style.cssText);
-}
-// displays "background-color: gray;"
-
-
-宣言ブロックは、波括弧内に現れるスタイル規則の部分であり、(波括弧の前に書かれるセレクターのための) 実際のスタイル定義を提供します 。
- -{{APIRef("CSSOM")}}
- -CSSStyleSheet.deleteRule() メソッドは、スタイル規則を現在のスタイルシートオブジェクトから削除します。
stylesheet.deleteRule(index) -- -
index は、規則の位置を表す倍精度整数値。無効。
- -myStyles.deleteRule(0); -- -
| 仕様書 | -策定状況 | -備考 | -
|---|---|---|
| {{SpecName("CSSOM", "#dom-cssstylesheet-deleterule", 'CSSStyleSheet.deleteRule()')}} | -{{Spec2("CSSOM")}} | -- |
| {{SpecName("DOM2 Style", "css.html#CSS-CSSStyleSheet-deleteRule", "CSSStyleSheet.deleteRule()")}} | -{{Spec2("DOM2 Style")}} | -初期定義 | -
{{Compat("api.CSSStyleSheet.deleteRule")}}
- -CSSStyleSheet インターフェイスは、1 枚の CSS スタイルシートを表します。これは、その親の {{domxref("StyleSheet")}} からプロパティとメソッドを継承します。
スタイルシートは、{{domxref("CSSStyleRule", "スタイル規則", "", 1)}} ("h1,h2 { font-size: 16pt }")、様々な @-規則 (@import, @media, ...) 等の {{domxref("CSSRule", "規則", "", 1)}} から構成されます。このインターフェイスは、スタイルシート内の規則のリストを調査および変更できます。
CSSStyleSheet オブジェクトを取得できる様々な方法は、補記 セクションを参照してください。
- -親である {{domxref("Stylesheet")}} からプロパティを継承します。
- - styleSheet.cssRules[i] // where i = 0..cssRules.lengthcssRules 内のアイテムを追加または削除するには、下記のように、CSSStyleSheet の deleteRule() メソッドと insertRule() メソッドを使用します。ownerRule は、その {{domxref("CSSImportRule")}} を返す。そうでない場合、null を返す。親である {{domxref("Stylesheet")}} からメソッドを継承します。
- -一部のブラウザーでは、スタイルシートが異なるドメインから読み込まれている場合、cssRules の呼び出しで SecurityError が発生します。
スタイルシートは、多くても 1 個の {{domxref("Document")}} と関連付けられ、これに適用されます ({{domxref("StyleSheet.disabled", "disabled", "", 1)}} でない限り)。与えられた document の CSSStyleSheet オブジェクトのリストは、{{domxref("document.styleSheets")}} プロパティを使用して取得できます。特定のスタイルシートは、もしあれば、その owner オブジェクト (Node または CSSImportRule) からもアクセスできます。
CSSStyleSheet オブジェクトは、document のスタイルシートが読み込まれた時に、ブラウザーによって自動的に作成され、その document の styleSheets リストに挿入されます。{{domxref("document.styleSheets")}} リストは直接変更できないため、新しい CSSStyleSheet オブジェクトを手動で作成する手ごろな方法はありません (とはいえ、Constructable Stylesheet Objects が Web API のどこかに追加される可能性があります)。新しいスタイルシートを作成するには、{{HTMLElement("style")}} 要素か {{HTMLElement("link")}} 要素を document に挿入してください。
スタイルシートを document と関連付ける方法のリスト (おそらく未完成) は次のとおり:
- -| スタイルシートが document と関連付けられる理由 | -document リストに現れる |
- スタイルシートオブジェクトを与える owner 要素または規則の取得 | -owner オブジェクトのインターフェイス | -CSSStyleSheet オブジェクトを owner から取得 | -
|---|---|---|---|---|
| document 内の {{HTMLElement("style")}} 要素と {{HTMLElement("link")}} 要素 | -はい | -{{domxref("StyleSheet.ownerNode", ".ownerNode")}} | -{{domxref("HTMLLinkElement")}} または - {{domxref("HTMLStyleElement")}}、 - {{domxref("SVGStyleElement")}} |
- {{domxref("LinkStyle.sheet", ".sheet")}} | -
| document に適用される他のスタイルシート内の CSS {{cssxref("@import")}} 規則 | -はい | -{{domxref("CSSStyleSheet.ownerRule", ".ownerRule")}} | -{{domxref("CSSImportRule")}} | -{{domxref("CSSImportRule.styleSheet", ".styleSheet")}} | -
(HTML でない) document 内の <?xml-stylesheet ?> 処理命令 |
- はい | -{{domxref("StyleSheet.ownerNode", ".ownerNode")}} | -{{domxref("ProcessingInstruction")}} | -{{domxref("LinkStyle.sheet", ".sheet")}} | -
| HTTP Link Header | -はい | -N/A | -N/A | -N/A | -
| ユーザーエージェントの (既定の) スタイルシート | -いいえ | -N/A | -N/A | -N/A | -
| 仕様書 | -策定状況 | -備考 | -
|---|---|---|
| {{SpecName("CSSOM", "#cssstylesheet", 'CSSStyleSheet')}} | -{{Spec2("CSSOM")}} | -- |
| {{SpecName("DOM2 Style", "css.html#CSS-CSSStyleSheet", "CSSStyleSheet")}} | -{{Spec2("DOM2 Style")}} | -初期定義 | -
{{Compat("api.CSSStyleSheet")}}
- - -CSSStyleSheet.insertRule() メソッドは、新しい CSS 規則を現在のスタイルシートに挿入しますが、いくつかの制限があります。
- -メモ: insertRule() は {{domxref("CSSStyleSheet")}} の排他的なメソッドですが、実際には規則を {{domxref("CSSStyleSheet", "", "", "1")}}.cssRules、内部的には {{domxref("CSSRuleList")}} に挿入します。
stylesheet.insertRule(rule[, index])- -
挿入される規則が入った {{domxref("DOMString")}} です。どのような規則を挿入するかは、種類に依存します。
- - -stylesheet.cssRules.length 以下の正の数で、 {{domxref("CSSStyleSheet", "", "", "1")}}.cssRules の中で新しく挿入される規則の位置を示します。既定値は 0 です。 (古い実装では、これは必須でした。詳しくはブラウザーの対応を参照してください。)スタイルシートの規則リスト内の、新たに挿入された規則のインデックスです。
- -CSS スタイルシート規則のリストには、規則がどのようにどこへ挿入されるかに影響する、いくつかの直感的な、またはそれほど直感的でない 制限 があります。これらに違反すると、 {{domxref("DOMException")}} のようなエラーを引き起こす原因になるでしょう。
- -{{domxref("CSSRuleList", "", "", "1")}}.length を超える場合、 IndexSizeError で処理を中止します。0 に挿入できない場合、 HierarchyRequestError で処理を中止します。SyntaxError で処理を中止します。HierarchyRequestError で処理を中止します。@import @-規則や @namespace @-規則が含まれている場合、 InvalidStateError で処理を中止します。// myStyle の先頭に新しい規則を挿入
-myStyle.insertRule("#blanc { color: white }", 0);
-
-
-/**
- * Add a stylesheet rule to the document (it may be better practice
- * to dynamically change classes, so style information can be kept in
- * genuine stylesheets and avoid adding extra elements to the DOM).
- * Note that an array is needed for declarations and rules since ECMAScript does
- * not guarantee a predictable object iteration order, and since CSS is
- * order-dependent.
- * @param {Array} rules Accepts an array of JSON-encoded declarations
- * @example
-addStylesheetRules([
- ['h2', // Also accepts a second argument as an array of arrays instead
- ['color', 'red'],
- ['background-color', 'green', true] // 'true' for !important rules
- ],
- ['.myClass',
- ['background-color', 'yellow']
- ]
-]);
-*/
-function addStylesheetRules (rules) {
- var styleEl = document.createElement('style');
-
- // Append <style> element to <head>
- document.head.appendChild(styleEl);
-
- // Grab style element's sheet
- var styleSheet = styleEl.sheet;
-
- for (var i = 0; i < rules.length; i++) {
- var j = 1,
- rule = rules[i],
- selector = rule[0],
- propStr = '';
- // If the second argument of a rule is an array of arrays, correct our variables.
- if (Array.isArray(rule[1][0])) {
- rule = rule[1];
- j = 0;
- }
-
- for (var pl = rule.length; j < pl; j++) {
- var prop = rule[j];
- propStr += prop[0] + ': ' + prop[1] + (prop[2] ? ' !important' : '') + ';\n';
- }
-
- // Insert CSS Rule
- styleSheet.insertRule(selector + '{' + propStr + '}', styleSheet.cssRules.length);
- }
-}
-
-| 仕様書 | -状態 | -備考 | -
|---|---|---|
| {{SpecName('CSSOM', '#dom-cssstylesheet-insertrule', 'CSSStyleSheet.insertRule')}} | -{{Spec2('CSSOM')}} | -{{SpecName('DOM2 Style')}} からの変更なし。 | -
| {{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleSheet-insertRule', 'CSSStyleSheet.insertRule')}} | -{{Spec2('DOM2 Style')}} | -初回定義 | -
以下のポリフィルは、 Internet Explorer 5–8 において、 insertRule の引数の入力を標準に準拠させるものです。 insertRule を関数で補完し、引数を既定のネイティブの insertRule に送る前に、セレクターを規則から分離します。
(function(Sheet_proto){
- var originalInsertRule = Sheet_proto.insertRule;
- if (originalInsertRule.length === 2){ // 2 mandatory arguments: (selector, rules)
- Sheet_proto.insertRule = function(selectorAndRule){
- // First, separate the selector from the rule
- a: for (var i=0, Len=selectorAndRule.length, isEscaped=0, newCharCode=0; i !== Len; ++i) {
- newCharCode = selectorAndRule.charCodeAt(i);
- if (!isEscaped && (newCharCode === 123)) { // 123 = "{".charCodeAt(0)
- // Secondly, find the last closing bracket
- var openBracketPos = i, closeBracketPos = -1;
- for (; i !== Len; ++i) {
- newCharCode = selectorAndRule.charCodeAt(i);
- if (!isEscaped && (newCharCode === 125)) { // 125 = "}".charCodeAt(0)
- closeBracketPos = i;
- }
- isEscaped ^= newCharCode===92?1:isEscaped; // 92 = "\\".charCodeAt(0)
- }
- if (closeBracketPos === -1) break a; // no closing bracket was found!
- /*else*/ return originalInsertRule.call(
- this, // the sheet to be changed
- selectorAndRule.substring(0, openBracketPos), // the selector
- selectorAndRule.substring(closeBracketPos), // the rule
- arguments[3] // the insert index
- );
- }
- // works by if the char code is a backslash, then isEscaped gets flipped (XOR-ed by
- // 1), and if it is not a backslash then isEscaped gets XORed by itself, zeroing it
- isEscaped ^= newCharCode===92?1:isEscaped; // 92 = "\\".charCodeAt(0)
- }
- // Else, there is no unescaped bracket
- return originalInsertRule.call(this, selectorAndRule, "", arguments[2]);
- };
- }
-})(CSSStyleSheet.prototype);
-
-
-{{Compat("api.CSSStyleSheet.insertRule")}}
- -addRule(selector, rule [, index]); — 例: addRule('pre', 'font: 14px verdana'); // 規則を末尾に追加
また、標準外の removeRule() および .rules が、それぞれ {{domxref("CSSStyleSheet.deleteRule","deleteRule()")}} および {{domxref("CSSStyleSheet",".cssRules")}} の代わりに使用されていることにも注意してください。