JavaScript を使用した CSS プロパティの抽出
HTML ドキュメントに添付されたスタイルシートをナビゲートすると、ページ要素のプレゼンテーションについて貴重な洞察が得られます。特に、特定の CSS プロパティを読み取る機能は、動的なスタイル操作に役立ちます。
1 つの方法では、document.styleSheets オブジェクトを手動で検査し、スタイル ルールを解析します。ただし、この方法は労力がかかり、特に特定のセレクターを対象とする場合には扱いにくくなる可能性があります。
より直接的な手法は、目的のセレクターに一致する一時要素を作成することです。 getComputedStyle() (最新のブラウザの場合) メソッドまたは currentStyle (Internet Explorer の場合) メソッドを使用すると、作成された要素の CSS プロパティの計算値を取得できます。
たとえば、次のコードを考慮して、クラス "layout" の
function getStyleProp(elem, prop) {
if (window.getComputedStyle) {
return window.getComputedStyle(elem, null).getPropertyValue(prop);
} else if (elem.currentStyle) {
return elem.currentStyle[prop]; // IE
}
}
window.onload = function () {
var d = document.createElement("div"); // Create div
d.className = "layout"; // Set class = "layout"
alert(getStyleProp(d, "color")); // Get property value
};
また、インライン スタイルを考慮せずにスタイルシートから継承した CSS プロパティを決定したい場合は、次の関数を使用できます。
function getNonInlineStyle(elem, prop) {
var style = elem.cssText; // Cache the inline style
elem.cssText = ""; // Remove all inline styles
var inheritedPropValue = getStyleProp(elem, prop); // Get inherited value
elem.cssText = style; // Add the inline style back
return inheritedPropValue;
}
これらの技術を活用することで、開発者は要素の CSS プロパティを動的に調整し、プレゼンテーションを操作し、ページのスタイルをより深く理解できるようになります。
免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。
Copyright© 2022 湘ICP备2022001581号-3