JavaScriptで擬似要素を操作する

  • Updated: 2023.08.08
  • Published: 2023.08.07
  • 2,590views
  • JavaScript
  • 擬似要素

概要

JavaScriptで擬似要素(:before、:after)を操作します。


取得

HTML

<div class="contentText">
  テキスト
</div>

CSS

.contentText:before{
   content: "コンテント";
}

JavaScript

let $text = document.querySelector('.contentText');
let before = window.getComputedStyle($text, '::before');
console.log(before.getPropertyValue('content'));
// コンテント

変更

JavaScript

let sheets = document.styleSheets
let sheet = sheets[sheets.length - 1];

//スタイルルールの追加
sheet.insertRule(
  '.contentText::before { content: "コンテント2" }',
  sheet.cssRules.length
);

コメントを投稿する

CAPTCHA


関連記事

人気の投稿

最新の投稿

タグ

月別アーカイブ

Contact

WEB制作の依頼など気軽にお問い合わせください。

お問い合わせ