疑似要素(::before,::after)のプロパティを取得する【JavaScript】

結論から言うと、getComputedStyle関数を使えば取得できます。

index.html

<h1>エヴァンゲリオン</h1>

style.css

h1::before{
  content:"シン";
  color:red;
}

index.js

const str = getComputedStyle(document.querySelector("h1"), "::before").content;
console.log(str);

※index.htmlからそれぞれのファイルを読み込んでいるものとしてください

 

▲このように、コンソール上でbefore要素のcontentプロパティ(”シン”)が取得できてます。 

 

この場合、getComputedStyle(document.querySelector("h1"), "::before").colorと指定すれば、赤色を取得できます。

 

ちなみに、before要素などの疑似要素はDOMで操作できないため、CSSのプロパティを変更したい場合は、変更したいCSSを新しく追加するしかないっぽいです。

 

おわり

HTML/CSS/JavaScript
スポンサーリンク
この記事を書いた人
penpen

1991生まれ。
2019年くらいからフロントエンドエンジニアを目指している元アフィリエイターです💩

penpenをフォローする
penpenをフォローする
penpenメモ

コメント

タイトルとURLをコピーしました