dom要素のスタイルを取得するgetComputedStyle
794 ワード
dom要素のcssスタイルを取得したい場合は、styleプロパティを取得することを直接考えます.
document.getElementById('div').style
しかし、実際にはあなたが望んでいるほどではありません.style属性の各値の大部分は空です.スタイルはcssによって生成されることが多いからです.
Jqueryにあります.css('color')の方法は、実は原生のgetComputedStyleによって実現されています.
以下に実装方法を示します.
getComputedStyleの最初のパラメータはdomオブジェクトで、2番目は擬似クラスセレクタです.
WindowsのようにgetComputedStyle(element, "::after")
document.getElementById('div').style
しかし、実際にはあなたが望んでいるほどではありません.style属性の各値の大部分は空です.スタイルはcssによって生成されることが多いからです.
Jqueryにあります.css('color')の方法は、実は原生のgetComputedStyleによって実現されています.
以下に実装方法を示します.
function getStyle(element, styleName) {
if (!element || !styleName) return false;
if (styleName === 'float') styleName = 'cssFloat';
try {
const computed = document.defaultView.getComputedStyle(element, '');
return element.style[styleName] || computed ? computed[styleName] : null;
} catch (e) {
return element.style[styleName];
}
};
getComputedStyleの最初のパラメータはdomオブジェクトで、2番目は擬似クラスセレクタです.
WindowsのようにgetComputedStyle(element, "::after")