いがにんのぼやき

WEBエンジニアのブログ。IT、WEB、バンド、アニメ。

JavaScriptで指定のスタイルが当たっている要素を探す

JavaScriptで指定の要素に適用されているスタイルや、特定のスタイルが適用されている要素を探したいときってあるよね。
そんなときに簡単にとろうと思ってJSでコードを書いてみると、

document.getElementById('hoge').style

こんなコード書けばとれるんじゃないかと。
で、オブジェクトが返ってくるので中身を見てみるとCSSに書いたスタイルが取れてないんですよ。
この記法だと要素に直接記述されたスタイルしか取れない。

結論、要素に書いたスタイル、それ以外のスタイルも含めて要素に適用されているスタイルをとるならgetComputedStyleを使おうぜって話。

developer.mozilla.org

const elm = document.getElementById('hoge');
const styles = getComputedStyle(elm);

これでCSSも含めてすべてのスタイルが適用された要素のスタイルがCSSStyleDeclarationという型のオブジェクトで返ってくる。
スタイルはそれぞれケバブケースからキャメルケースにした名前でその値が取得できる。

const elm = document.getElementById('hoge');
const style = getComputedStyle(element).backgroundColor; // rgb(0, 0, 0)

f:id:igatea:20190707004417p:plain

注意として色をblack#000としている場合にrgbに変換された値で出てくるので比較するならそれを配慮しなければいけない。

指定の要素から特定のスタイルが当たっている先祖要素を探す

再帰的に検索してあげればいい。
子孫要素から探すなら逆に再帰関数を書けばいける。

/**
 * @param {HTMLElement} element
 * @param {string} styleName
 * @param {string} styleValue
 */
function findHasStyleAncestorElement(element, styleName, styleValue) {
  if (!element) return null;
  const style = getComputedStyle(element)[styleName];
  if (style === styleValue) return element;
  return findHasStyleAncestorElement(
    element.parentElement,
    styleName,
    styleValue
  );
}

const elm = document.getElementById("c");
const blackBackgroundElm = findHasStyleAncestorElement(
  elm,
  "backgroundColor",
  "rgb(0, 0, 0)" // blackではない
);