KnowHub

CSS 操作

CSS と JavaScript は明確な役割分担を持つ 2 つの領域であり、前者はページの視覚効果を担当し、後者はユーザーの動作との対話を担当します。しかし、結局のところ、これらは Web 開発のフロントエンドに属しているため、必然的に互いに重なり合い、連携します。この章では、JavaScript を通じて CSS を操作する方法について説明します。

HTML要素のstyle属性

CSS スタイルを操作する最も簡単な方法は、Web ページ要素ノードの getAttribute() メソッド、setAttribute() メソッド、および removeAttribute() メソッドを使用して、Web ページ要素ノードの style 属性を直接読み取り、書き込み、または削除することです。 Web ページ要素。

div.setAttribute(
  'スタイル'、
  '背景色:赤;' + 'ボーダー:1px 単色黒;'
);

上記のコードは、以下の HTML コードと同等です。

<div style="background-color:red; border:1px 単色黒;" />

style は文字列を使用して読み書きできるだけでなく、CSSStyleDeclaration インターフェイス (詳細については以下の概要を参照) を展開し、個々のプロパティを直接読み書きできます。

e.style.fontSize = '18px';
e.style.color = '黒';

CSSStyleDeclaration インターフェース

導入

CSSStyleDeclaration インターフェイスは、要素のスタイルを操作するために使用されます。このインターフェースは 3 つの場所にデプロイされます。

  • 要素ノードのstyle属性(Element.style)
  • CSSStyle インスタンスの style 属性
  • window.getComputedStyle()の戻り値

CSSStyleDeclaration インターフェイスは CSS スタイル プロパティを直接読み書きできますが、ハイフンをキャメル スペルに変更する必要があります。

var divStyle = document.querySelector('div').style;

divStyle.backgroundColor = '赤';
divStyle.border = '1px ソリッドブラック';
divStyle.width = '100px';
divStyle.height = '100px';
divStyle.fontSize = '10em';

divStyle.backgroundColor // 赤
divStyle.border // 1px 単色黒
divStyle.height // 100px
divStyle.width // 100px

上記のコードでは、「style」属性の値は CSSStyleDeclaration インスタンスです。このオブジェクトに含まれるプロパティは CSS ルールに 1 対 1 で対応しますが、名前を書き換える必要があります。たとえば、background-color は backgroundColor として記述されます。書き換えのルールは、CSS プロパティ名からダッシュを削除し、ダッシュの後の最初の文字を大文字にすることです。 CSS プロパティ名が JavaScript の予約語である場合、ルール名の前に文字列 css を追加する必要があります。たとえば、float は cssFloat と記述されます。

このオブジェクトの属性値はすべて文字列であり、設定時に単位を含める必要がありますが、ルールの最後のセミコロンは含まれないことに注意してください。たとえば、divStyle.width を 100 として記述することはできませんが、100px として記述する必要があります。

さらに、Element.style は要素のすべてのスタイルではなく、インライン スタイルのみを返します。スタイル シートを通じて設定されたスタイル、または親要素から継承されたスタイルは、この属性を通じて取得できません。要素のすべてのスタイルは、「window.getComputedStyle()」を通じて取得する必要があります。

CSSStyleDeclaration インスタンスのプロパティ

(1)CSSSStyleDeclaration.cssText

CSSStyleDeclaration.cssText プロパティは、現在のルールのすべてのスタイル宣言テキストの読み取りと書き込みに使用されます。

var divStyle = document.querySelector('div').style;

divStyle.cssText = '背景色: 赤;'
  + '境界線: 1px 黒一色;'
  + '高さ: 100ピクセル;'
  + '幅: 100ピクセル;';

cssText のプロパティ値は CSS プロパティ名を上書きする必要がないことに注意してください。

要素からすべてのインライン スタイルを削除する最も簡単な方法は、cssText を空の文字列に設定することです。

divStyle.cssText = '';

(2)CSSSStyleDeclaration.length

CSSStyleDeclaration.length プロパティは、現在のルールに含まれるスタイル宣言の数を示す整数値を返します。

// HTMLコードは以下の通り
// <div id="myDiv"
// style="高さ: 1px;幅: 100%;背景色: #CA1;"
// ></div>
var myDiv = document.getElementById('myDiv');
var divStyle = myDiv.style;
divStyle.length // 3

上記のコードでは、「myDiv」要素のインライン スタイルに合計 3 つのスタイル ルールが含まれています。

(3)CSSSStyleDeclaration.parentRule

CSSStyleDeclaration.parentRule プロパティは、現在のルールが属するスタイル ブロック (CSSRule インスタンス) を返します。対応するスタイル ブロックが存在しない場合、このプロパティは null を返します。

このプロパティは読み取り専用であり、CSSRule インターフェイスを使用する場合にのみ意味を持ちます。

var 宣言 = document.styleSheets[0].rules[0].style;
宣言.parentRule === document.styleSheets[0].rules[0]
// 真実

CSSStyleDeclaration インスタンス メソッド

(1)CSSSStyleDeclaration.getPropertyPriority()

CSSStyleDeclaration.getPropertyPriority メソッドは、CSS スタイルのプロパティ名をパラメータとして受け取り、「重要」な優先度が設定されているかどうかを示す文字列を返します。存在する場合は「重要」を返し、存在しない場合は空の文字列を返します。

// HTMLコードは
// <div id="myDiv" style="margin: 10px! important; color: red;"/>
var style = document.getElementById('myDiv').style;
style.margin // "10px"
style.getPropertyPriority('margin') // "重要"
style.getPropertyPriority('color') // ""

上記のコードでは、「margin」属性には「重要」な優先順位がありますが、「color」属性には優先順位がありません。

(2)CSSSStyleDeclaration.getPropertyValue()

CSSStyleDeclaration.getPropertyValue メソッドは、CSS スタイル プロパティ名をパラメータとして受け取り、プロパティのプロパティ値を表す文字列を返します。

// HTMLコードは
// <div id="myDiv" style="margin: 10px! important; color: red;"/>
var style = document.getElementById('myDiv').style;
style.margin // "10px"
style.getPropertyValue("margin") // "10px"

(3)CSSSStyleDeclaration.item()

CSSStyleDeclaration.item メソッドは整数値をパラメータとして受け取り、その位置の CSS プロパティ名を返します。

// HTMLコードは
// <div id="myDiv" style="color: 赤; 背景色: 白;"/>
var style = document.getElementById('myDiv').style;
style.item(0) // "色"
style.item(1) // "背景色"

上記のコードでは、位置「0」の CSS プロパティ名は「color」、位置「1」の CSS プロパティ名は「background-color」です。

パラメータが指定されていない場合、このメソッドはエラーを報告します。パラメータ値が実際の属性数を超える場合、このメソッドは null 文字値を返します。

(4)CSSSStyleDeclaration.removeProperty()

CSSStyleDeclaration.removeProperty メソッドはプロパティ名をパラメータとして受け取り、CSS ルールからこのプロパティを削除し、このプロパティの元の値を返します。

// HTMLコードは
// <div id="myDiv" style="color: 赤; 背景色: 白;">
// 111
// </div>
var style = document.getElementById('myDiv').style;
style.removeProperty('color') // '赤'
// HTMLコードは次のようになります
// <div id="myDiv" style="background-color:white;">

上記のコードでは、「color」属性を削除すると、フォントの色が赤からデフォルトの色に変わります。

(5)CSSSStyleDeclaration.setProperty()

CSSStyleDeclaration.setProperty メソッドは、新しい CSS プロパティを設定するために使用されます。このメソッドには戻り値がありません。

このメソッドは 3 つのパラメータを受け入れることができます。

  • 最初のパラメータ: 属性名。このパラメータは必須です。
  • 2 番目のパラメータ: 属性値。このパラメータはオプションです。省略した場合、パラメータ値はデフォルトで空の文字列になります。
  • 3 番目のパラメーター: 優先順位。このパラメーターはオプションです。設定されている場合、唯一の有効な値は「重要」です。これは、CSS ルールの「!重要」を表します。
// HTMLコードは
// <div id="myDiv" style="color: 赤; 背景色: 白;">
// 111
// </div>
var style = document.getElementById('myDiv').style;
style.setProperty('border', '1px 青一色');

上記のコードを実行すると、myDiv 要素に青い枠線が表示されます。

CSS モジュールの検出

CSS仕様の発展はあまりにも早く、新しいモジュールが次々と登場しています。ブラウザーのバージョンが異なれば、CSS モジュールのサポートも異なります。現在のブラウザが特定のモジュールをサポートしているかどうかを知る必要がある場合があります。これは「CSS モジュール検出」と呼ばれます。

より一般的に適用できる方法は、要素の「style」オブジェクトの特定の属性値が文字列であるかどうかを判断することです。

要素の種類.スタイル.アニメーション名 === '文字列';
element.style.transform のタイプ === '文字列';

CSS プロパティが存在する場合は、文字列が返されます。プロパティが実際に設定されていない場合でも、空の文字列が返されます。プロパティが存在しない場合は、「未定義」が返されます。

document.body.style['maxWidth'] // ""
document.body.style['maximumWidth'] // 未定義

上記のコードは、このブラウザが max-width 属性をサポートしているが、maximum-width 属性をサポートしていないことを示しています。

CSS プロパティ名がハイフン付きで書かれているかどうかに関係なく、style 属性はプロパティが存在するかどうかを反映することに注意してください。

document.body.style['backgroundColor'] // ""
document.body.style['背景色'] // ""

さらに、これを使用する場合は、さまざまなブラウザーの CSS プレフィックスを考慮する必要があります。

var content = document.getElementById('content');
content.style['webkitAnimation'] の種類 === '文字列'

この検出方法は関数として記述することができます。

関数 isPropertySupported(プロパティ) {
  if (document.body.style のプロパティ) が true を返します。
  var prefixes = ['Moz', 'Webkit', 'O', 'ms', 'Khtml'];
  var prefProperty = property.charAt(0).toUpperCase() + property.substr(1);

  for(var i = 0; i < prefixes.length; i++){
    if((prefixes[i] + prefProperty) in document.body.style) は true を返します。
  }

  false を返します。
}

isPropertySupported('背景クリップ')
// 真実

CSS オブジェクト

ブラウザーは CSS オブジェクトをネイティブに提供し、JavaScript が CSS を操作するためのいくつかのツール メソッドを提供します。

このオブジェクトには現在 2 つの静的メソッドがあります。

CSS.escape()

CSS.escape メソッドは、CSS セレクター内の特殊文字をエスケープするために使用されます。

<div id="foo#bar">

上記のコードでは、要素の id 属性に # 記号が含まれており、これは CSS セレクターで特別な意味を持ちます。 document.querySelector('#foo#bar') として直接記述することはできません。document.querySelector('#foo\\#bar') としてのみ記述できます。ここで二重スラッシュが必要な理由は、単一引用符で囲まれた文字列自体がスラッシュを 1 回エスケープするためです。

CSS.escape メソッドは、これらの特殊文字をエスケープするために使用されます。

document.querySelector('#' + CSS.escape('foo#bar'))

CSS.supports()

CSS.supports メソッドは、現在の環境が特定の CSS ルールをサポートしているかどうかを示すブール値を返します。

パラメータを記述する方法は 2 つあり、1 つは最初のパラメータが属性名であり、もう 1 つはパラメータ全体が完全な CSS ステートメントである方法です。

//最初の書き方
CSS.supports('transform-origin', '5px') // true

// 2 番目の書き方
CSS.supports('display: テーブルセル') // true

2 番目の書き方のパラメータの最後にセミコロンを付けることはできないことに注意してください。セミコロンを付けないと、結果が不正確になります。

CSS.supports('display: table-cell;') // false

window.getComputedStyle()

インライン スタイルが最も優先され、通常、インライン スタイルへの変更はすぐに反映されます。ただし、Web ページ要素の最終的なスタイルは、さまざまなルールに基づいて計算されます。したがって、要素の実際のスタイルを取得したい場合は、インライン スタイルを読み取るだけでは十分ではなく、ブラウザによって最終的に計算されたスタイル ルールを取得する必要があります。

window.getComputedStyle() メソッドは、ブラウザによって計算された最終ルールを返すために使用されます。ノード オブジェクトをパラメータとして受け取り、指定されたノードの最終スタイル情報を含む CSSStyleDeclaration インスタンスを返します。いわゆる「最終的なスタイル情報」とは、さまざまな CSS ルールを重ね合わせた結果を指します。

var div = document.querySelector('div');
var styleObj = window.getComputedStyle(div);
styleObj.backgroundColor

上記のコードで取得される背景色は、「div」要素の実際の背景色です。

CSSStyleDeclaration インスタンスは生きたオブジェクトであり、スタイルへの変更はリアルタイムでこのインスタンスに反映されることに注意してください。さらに、このインスタンスは読み取り専用です。

getComputedStyle メソッドは、現在の要素の疑似要素 (:before、:after、:first-line、:first-letter など) を表す 2 番目のパラメーターも受け入れることができます。 。）。

var result = window.getComputedStyle(div, ':before');

次の例は、要素の高さを取得する方法を示しています。

var elem = document.getElementById('elem-container');
var styleObj = window.getComputedStyle(elem, null)
var height = styleObj.height;
// と同等
var height = styleObj['height'];
var height = styleObj.getPropertyValue('height');

上記のコードによって取得される height 属性は、ブラウザによって最終的に表示される高さであり、他のメソッドで取得される高さよりも信頼性が高くなります。 styleObj は CSSStyleDeclaration インスタンスであるため、さまざまな CSSStyleDeclaration インスタンスのプロパティとメソッドを使用できます。

注意すべき点がいくつかあります。

  • CSSStyleDeclaration インスタンスによって返される CSS 値は絶対単位です。たとえば、長さはピクセル単位であり (戻り値には接尾辞 px が含まれます)、色は rgb(#, #, #) または rgba(#, #, #, #) 形式です。 。
  • CSS ルールの短縮形式が無効です。たとえば、margin 属性の値を読み取る場合、marginLeft、marginTop およびその他の属性のみを読み取ることができます。別の例として、font 属性は読み取ることができません。直接的には、単一の属性の font-size などのみを読み取ることができます。
  • 元の CSS プロパティ名を読み取る場合は、styleObj['z-index'] のように角括弧演算子を使用します。キャメル スペルの CSS プロパティ名を読み取る場合は、styleObj.zIndex を直接読み取ることができます。
  • このメソッドによって返される CSSStyleDeclaration インスタンスの cssText プロパティは、常に空の文字列を返します。

CSS 擬似要素

CSS 疑似要素は、CSS を通じて DOM に追加される要素であり、主に :before および :after セレクターを通じて生成され、その後、content 属性を使用して疑似要素のコンテンツを指定します。

以下は HTML コードの一部です。

<div id="test">テスト内容</div>

疑似要素:beforeを追加するCSSは以下のように記述します。

#テスト:前 {
  内容: '前';
  色: #FF0;
}

ノード要素の style オブジェクトは、疑似要素のスタイルを読み書きすることができません。この場合、window.getComputedStyle() を使用する必要があります。 JavaScriptで擬似要素を取得するには、以下のメソッドを使用できます。

var test = document.querySelector('#test');

var result = window.getComputedStyle(test, ':before').content;
var color = window.getComputedStyle(test, ':before').color;

さらに、CSSStyleDeclaration インスタンスの getPropertyValue メソッドを使用して、疑似要素のプロパティを取得することもできます。

var result = window.getComputedStyle(test, ':before')
  .getPropertyValue('コンテンツ');
var color = window.getComputedStyle(test, ':before')
  .getPropertyValue('color');

スタイルシートインターフェイス

概要

StyleSheet インターフェイスは、<link> 要素によって読み込まれるスタイル シートや <style> 要素に埋め込まれたスタイル シートなど、Web ページのスタイル シートを表します。

document オブジェクトの styleSheets プロパティは、現在のページのすべての StyleSheet インスタンス (つまり、すべてのスタイル シート) を返すことができます。配列のようなオブジェクトです。

var シート = document.styleSheets;
var シート = document.styleSheets[0];
シートインスタンスのスタイルシート // true

<style> 要素に埋め込まれたスタイル シートの場合、このノード要素の sheet 属性である StyleSheet インスタンスを取得する別の方法があります。

// HTML コードは <style id="myStyle"></style> です。
var myStyleSheet = document.getElementById('myStyle').sheet;
myStyleSheet スタイルシートのインスタンス // true

厳密に言えば、StyleSheet インターフェースには Web ページのスタイル シートだけでなく、XML ドキュメントのスタイル シートも含まれます。したがって、Web ページの CSS スタイル シートを表すサブクラス CSSStyleSheet があります。 Web ページで取得するスタイル シート インスタンスは、実際には CSSStyleSheet のインスタンスです。このサブインターフェイスは、「StyleSheet」のすべてのプロパティとメソッドを継承し、独自のプロパティのいくつかを定義します。2 つのインターフェイスを以下にまとめて紹介します。

インスタンスのプロパティ

StyleSheet インスタンスには次のプロパティがあります。

(1)スタイルシート.無効

StyleSheet.disabled は、スタイル シートが無効かどうかを示すブール値を返します。 disabled 属性を手動で true に設定することは、このスタイル シートを <link> 要素の alternate stylesheet に設定することと同じです。つまり、スタイル シートは有効になりません。

「disabled」属性は JavaScript スクリプトでのみ設定でき、HTML ステートメントでは設定できないことに注意してください。

(2)スタイルシート.href

StyleSheet.href はスタイル シートの URL を返します。インライン スタイル シートの場合、このプロパティは「null」を返します。このプロパティは読み取り専用です。

document.styleSheets[0].href

(3)スタイルシート.メディア

StyleSheet.media プロパティは、該当するメディアを表す文字列をメンバーとする配列のようなオブジェクト (MediaList インスタンス) を返します。現在のスタイル シートが画面 (screen)、印刷 (print)、またはハンドヘルド デバイス (handheld) 用であるか、またはさまざまなメディア (すべて) に適しているかを示します。このプロパティは読み取り専用で、デフォルト値は screen です。

document.styleSheets[0].media.mediaText
// "全て"

MediaList インスタンスの appendMedium メソッドはメディアの追加に使用され、deleteMedium メソッドはメディアの削除に使用されます。

document.styleSheets[0].media.appendMedium('ハンドヘルド');
document.styleSheets[0].media.deleteMedium('print');

(4)StyleSheet.title

StyleSheet.title プロパティは、スタイル シートの title プロパティを返します。

(5)StyleSheet.type

StyleSheet.type プロパティは、スタイル シートの type 属性 (通常は text/css) を返します。

document.styleSheets[0].type // "text/css"

(6)StyleSheet.parentStyleSheet

CSS @import コマンドを使用すると、スタイルシート内に他のスタイルシートを読み込むことができます。 StyleSheet.parentStyleSheet プロパティは、現在のスタイル シートを含むスタイル シートを返します。現在のスタイル シートがトップレベル スタイル シートの場合、このプロパティは「null」を返します。

if (stylesheet.parentStyleSheet) {
  シート = スタイルシート.親スタイルシート;
} それ以外 {
  シート = スタイルシート;
}

(7)StyleSheet.ownerNode

StyleSheet.ownerNode プロパティは、StyleSheet オブジェクトが配置されている DOM ノード (通常は <link> または <style>) を返します。他のスタイル シートによって参照されるスタイル シートの場合、このプロパティは「null」になります。

//HTMLコードは
// <link rel="StyleSheet" href="example.css" type="text/css" />
document.styleSheets[0].ownerNode // [オブジェクト HTMLLinkElement]

(8)CSSSStyleSheet.cssRules

CSSStyleSheet.cssRules プロパティは配列のようなオブジェクト (CSSRuleList インスタンス) を指します。各メンバーは現在のスタイル シートの CSS ルールです。このルールの cssText プロパティを使用すると、CSS ルールに対応する文字列を取得できます。

varsheet = document.querySelector('#styleElement').sheet;

sheet.cssRules[0].cssText
// "ボディ { 背景色: 赤; マージン: 20px; }"

sheet.cssRules[1].cssText
// "p { line-height: 1.4em; color: blue; }"

各 CSS ルールには、特定の CSS コマンドの読み取りおよび書き込みに使用されるオブジェクトを指す「style」属性もあります。

cssStyleSheet.cssRules[0].style.color = 'red';
cssStyleSheet.cssRules[1].style.color = '紫';

(9)CSSSStyleSheet.ownerRule

一部のスタイル シートは @import ルールを通じてインポートされ、その ownerRule 属性は @import ルールのその行を表す CSSRule インスタンスを返します。現在のスタイル シートが @import を通じて導入されていない場合、ownerRule プロパティは null を返します。

インスタンスメソッド

(1)CSSSStyleSheet.insertRule()

CSSStyleSheet.insertRule メソッドは、現在のスタイル シートに新しい CSS ルールを挿入するために使用されます。

varsheet = document.querySelector('#styleElement').sheet;
sheet.insertRule('#block { color: 白 }', 0);
sheet.insertRule('p { color: red }', 1);

このメソッドは 2 つのパラメータを受け入れることができます。最初のパラメータは CSS ルールを表す文字列です。ルールは 1 つだけです。それ以外の場合はエラーが報告されます。 2 番目のパラメータは、スタイル シート内のルールの挿入位置です (0 から始まります)。このパラメータはオプションで、デフォルトは 0 です (つまり、デフォルトでスタイル シートの先頭に挿入されます)。挿入位置が既存のルールの数より大きい場合、エラーが報告されることに注意してください。

このメソッドの戻り値は、新しく挿入されたルールの位置番号です。

ブラウザーには、ルールをスタイル シートに挿入するスクリプトに対して多くの制限があることに注意してください (https://drafts.c​​sswg.org/cssom/#insert-a-css-rule)。したがって、このメソッドは「try...catch」で使用するのが最適です。

(2)CSSSStyleSheet.deleteRule()

CSSStyleSheet.deleteRule メソッドは、スタイル シートからルールを削除するために使用されます。そのパラメータは、cssRules オブジェクト内のルールの位置です。このメソッドには戻り値がありません。

document.styleSheets[0].deleteRule(1);

例: スタイルシートを追加する

Web ページにスタイル シートを追加するには 2 つの方法があります。 1 つは、組み込みスタイル シートを追加することです。つまり、ドキュメントに <style> ノードを追加します。

//書き方その１
var style = document.createElement('style');
style.setAttribute('メディア', 'スクリーン');
style.innerHTML = 'body{color:red}';
document.head.appendChild(スタイル);

//書き方２
var スタイル = (関数 () {
  var style = document.createElement('style');
  document.head.appendChild(スタイル);
  戻りスタイル;
})();
style.sheet.insertRule('.foo{color:red;}', 0);

もう 1 つは、外部スタイル シートを追加することです。つまり、ドキュメントに <link> ノードを追加し、href 属性で外部スタイル シートの URL を指定します。

var linkElm = document.createElement('link');
linkElm.setAttribute('rel', 'stylesheet');
linkElm.setAttribute('type', 'text/css');
linkElm.setAttribute('href', 'reset-min.css');

document.head.appendChild(linkElm);

CSSRuleList インターフェース

CSSRuleList インターフェイスは、CSS ルールのセットを表す配列のようなオブジェクトであり、そのメンバーは CSSRule インスタンスです。

CSSRuleList インスタンスを取得するには、通常は「StyleSheet.cssRules」プロパティを使用します。

// HTMLコードは以下の通り
// <style id="myStyle">
// h1 { 色: 赤 }
// p { 色: 青 }
// </スタイル>
var myStyleSheet = document.getElementById('myStyle').sheet;
var crl = myStyleSheet.cssRules;
crl インスタンスオブ CSSRuleList // true

CSSRuleList インスタンスでは、「ru​​les.item(index)」または「rules[index]」を通じて各ルール (CSSRule インスタンス) を取得できます。 CSS ルールの数は「rules.length」を通じて取得されます。上記の例を引き続き使用します。

crl[0] CSSRuleのインスタンス // true
crl.length // 2

ルールの追加と削除は CSSRuleList インスタンスでは操作できませんが、StyleSheet.insertRule() および StyleSheet.deleteRule() を通じてその親要素の StyleSheet インスタンスに対して操作できることに注意してください。

CSSRule インターフェイス

概要

CSS ルールは、CSS セレクターとスタイル宣言の 2 つの部分で構成されます。以下は典型的な CSS ルールです。

.myClass {
  色: 赤;
  背景色: 黄色;
}

JavaScript は、CSSRule インターフェイスを通じて CSS ルールを操作します。通常、CSSRule インスタンスは CSSRuleList インターフェイス (StyleSheet.cssRules) を通じて取得されます。

// HTMLコードは以下の通り
// <style id="myStyle">
// .myClass {
// 色: 赤;
// 背景色: 黄色;
// }
// </スタイル>
var myStyleSheet = document.getElementById('myStyle').sheet;
var rulesList = myStyleSheet.cssRules;
var ルール = ルールリスト[0];
ルールインスタンス CSSRule // true

CSSRule インスタンスのプロパティ

(1)CSSRule.cssText

CSSRule.cssText プロパティは、上記の例を引き続き使用して、現在のルールのテキストを返します。

ルール.cssテキスト
// ".myClass { 色: 赤; 背景色: 黄色; }"

別のスタイルシートをロード (@import) するルールの場合、cssText プロパティは @import 'url' を返します。

(2)CSSRule.parentStyleSheet

CSSRule.parentStyleSheet プロパティは、上記の例を引き続き使用して、現在のルールが配置されているスタイルシート オブジェクト (StyleSheet インスタンス) を返します。

rules.parentStyleSheet === myStyleSheet // true

(3)CSSRule.parentRule

「CSSRule.parentRule」プロパティは、現在のルールを含む親ルールを返します。親ルールがない場合は「null」を返します（つまり、現在のルールがトップレベルのルールである場合）。

親ルールの最も一般的な状況は、現在のルールが「@media」ルール ブロックに含まれることです。

// HTMLコードは以下の通り
// <style id="myStyle">
// @supports (表示: flex) {
// @media screen and (min-width: 900px) {
// 記事 {
// 表示: フレックス;
// }
// }
// }
// </スタイル>
var myStyleSheet = document.getElementById('myStyle').sheet;
var rulesList = myStyleSheet.cssRules;

var ルール0 = ルールリスト[0];
ルール0.cssテキスト
// "@supports (表示: flex) {
// @media screen and (min-width: 900px) {
// 記事 { 表示: フレックス }
// }
// }"

// このルールは他のルールに埋め込まれているため、
// つまり、cssRules プロパティがあり、そのプロパティは CSSRuleList インスタンスです
rules0.cssRules CSSRuleList のインスタンス // true

var ルール 1 = ルール 0.cssRules[0];
ルール1.cssテキスト
// "@media screen and (min-width: 900px) {
// 記事 { 表示: フレックス }
// }"

var ルール 2 = ルール 1.cssRules[0];
ルール2.cssテキスト
// "記事 { 表示: フレックス; }"

rules1.parentRule === ルール0 // true
rules2.parentRule === ルール1 // true

(4)CSSRule.type

CSSRule.type プロパティは、現在のルールのタイプを示す整数値を返します。

最も一般的なタイプは次のとおりです。

  • 1: 通常のスタイル ルール (CSSStyleRule インスタンス)
  • 3: @import ルール
  • 4: @media ルール (CSSMediaRule インスタンス)
  • 5: @font-face ルール

CSSStyleRule インターフェース

CSS ルールが通常のスタイル ルール (特別な CSS コマンドを含まない) の場合、CSSRule インターフェイスに加えて CSSStyleRule インターフェイスも展開されます。

CSSStyleRule インターフェースには次の 2 つのプロパティがあります。

(1)CSSStyleRule.selectorText

CSSStyleRule.selectorText プロパティは、現在のルールのセレクターを返します。

var スタイルシート = document.styleSheets[0];
stylesheet.cssRules[0].selectorText // ".myClass"

このプロパティは書き込み可能であることに注意してください。

(2) CSSStyleRule.style

CSSStyleRule.style プロパティは、現在のルールのスタイル宣言、つまりセレクターの後の中括弧内の部分を表すオブジェクト (CSSStyleDeclaration インスタンス) を返します。

// HTMLコードは
// <style id="myStyle">
// p { 色: 赤 }
// </スタイル>
var styleSheet = document.getElementById('myStyle').sheet;
styleSheet.cssRules[0].CSSStyleDeclaration のスタイル インスタンス
// 真実

CSSStyleDeclaration インスタンスの cssText プロパティは、すべてのスタイル宣言を文字列形式で返すことができます。

styleSheet.cssRules[0].style.cssText
// "色: 赤;"
styleSheet.cssRules[0].selectorText
// "p"

CSSMediaRule インターフェイス

CSS ルールが「@media」コード ブロックである場合、CSSRule インターフェイスに加えて、CSSMediaRule インターフェイスも展開されます。

このインターフェースは主に media 属性と conditionText 属性を提供します。前者は @media ルールを表すオブジェクト (MediaList インスタンス) を返し、後者は @media ルールの有効条件を返します。

// HTMLコードは以下の通り
// <style id="myStyle">
// @media screen and (min-width: 900px) {
// 記事 { 表示: フレックス }
// }
// </スタイル>
var styleSheet = document.getElementById('myStyle').sheet;
styleSheet.cssRules[0] CSSMediaRule のインスタンス
// 真実

styleSheet.cssRules[0].media
// {
// 0: "画面と (min-width: 900px)",
// appendMedium: 関数、
// deleteMedium: 関数、
// 項目: 関数、
// 長さ: 1、
// mediaText: "画面と (最小幅: 900px)"
// }

styleSheet.cssRules[0].conditionText
// "画面と(min-width: 900px)"

window.matchMedia()

基本的な使い方

window.matchMedia() メソッドは、CSS Media Query 条件文を MediaQueryList インスタンスに変換するために使用されます。

var mdl = window.matchMedia('(最小幅: 400px)');
mdl instanceof MediaQueryList // true

上記のコードでは、変数 mdl は mediaQueryList のインスタンスです。

パラメータが有効な MediaQuery 条件文でない場合、window.matchMedia はエラーを報告せず、引き続き MediaQueryList インスタンスを返すことに注意してください。

window.matchMedia('bad string')instanceof MediaQueryList // true

MediaQueryList インターフェイスのインスタンス プロパティ

MediaQueryList インスタンスには 3 つのプロパティがあります。

(1)MediaQueryList.media

MediaQueryList.media プロパティは、対応する MediaQuery 条件文を表す文字列を返します。

var mql = window.matchMedia('(min-width: 400px)');
mql.media // "(最小幅: 400px)"

(2)MediaQueryList.matches

MediaQueryList.matches プロパティは、現在のページが指定された MediaQuery 条件文に一致するかどうかを示すブール値を返します。

if (window.matchMedia('(min-width: 400px)').matches) {
  /* 現在のビューポートは 400 ピクセル以上です */
} それ以外 {
  /* 現在のビューポートは 400 ピクセル未満です */
}

次の例では、mediaQuery が現在の環境に一致するかどうかに基づいて、対応する CSS スタイル シートを読み込みます。

var result = window.matchMedia("(最大幅: 700px)");

if (result.matches){
  var linkElm = document.createElement('link');
  linkElm.setAttribute('rel', 'stylesheet');
  linkElm.setAttribute('type', 'text/css');
  linkElm.setAttribute('href', 'small.css');

  document.head.appendChild(linkElm);
}

(3)MediaQueryList.onchange

MediaQuery 条件文の適応環境が変化すると、「change」イベントがトリガーされます。 MediaQueryList.onchange プロパティは、change イベントのリスニング機能を指定するために使用されます。この関数のパラメータは「change」イベント オブジェクト (MediaQueryListEvent インスタンス) です。これは MediaQueryList インスタンスに似ており、「media」プロパティと「matches」プロパティもあります。

var mql = window.matchMedia('(最大幅: 600px)');

mql.onchange = 関数(e) {
  if (e.matches) {
    /* ビューポートは 600 ピクセル以下 */
  } それ以外 {
    /* ビューポートが 600 ピクセルを超えています */
  }
}

上記のコードでは、「change」イベントが発生した後、2 つの可能性があります。 1 つは表示幅が 600 ピクセルを超えて 600 ピクセル未満に変化すること、もう 1 つは 600 ピクセル未満から 600 ピクセルを超えることであるため、listen 関数内で現在どちらの状況にあるかを判断する必要があります。

MediaQueryList インターフェイスのインスタンス メソッド

MediaQueryList インスタンスには 2 つのメソッド MediaQueryList.addListener() と MediaQueryList.removeListener() があり、これらは change イベントのリスニング関数を追加または削除するために使用されます。

var mql = window.matchMedia('(最大幅: 600px)');

//リスニング関数を指定する
mql.addListener(mqCallback);

//リスニング機能をキャンセルする
mql.removeListener(mqCallback);

関数 mqCallback(e) {
  if (e.matches) {
    /* ビューポートは 600 ピクセル以下 */
  } それ以外 {
    /* ビューポートが 600 ピクセルを超えています */
  }
}

MediaQueryList.removeListener() メソッドは、MediaQueryList.onchange プロパティで指定されたリスニング機能をキャンセルできないことに注意してください。

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章