jQuery | 疑似要素のCSSプロパティを取得する方法

2019-03-032022-03-07jQuery 取得,jQuery

jQueryのcss()は、疑似要素のCSSプロパティに参照出来きなません。

疑似要素のCSSプロパティを取得するにはJavaScriptのwindow.getComputedStyle()を利用することで実装可能となっています。

window.getComputedStyle()で疑似要素のCSSプロパティを取得する

window.getComputedStyle()を利用して疑似要素のCSSプロパティを取得する動作サンプルです。

See the Pen get CSS pseudo property function by yochans (@yochans) on CodePen.

サンプルではpの疑似要素::beforeにあるcontentプロパティを取得します。

p{
  background: #008080;
  color:#FFF;
  padding:10px;
  font-size:30px;
}

p::before{
  content: "★";
}

function getPseudo(selector,type,property){
   let propertys = window.getComputedStyle( $(selector)[0] , type );
   let data = propertys.getPropertyValue( property );
   return data;
}
  
let data = getPseudo('p', '::before', 'content');

console.log(data);
// ★

jQueryというよりはセレクタ名指定以外はJavaScriptとなっています。

関数じゃない版も紹介しておきます。

let propertys = window.getComputedStyle( $(p)[0] , '::before' );
let data = propertys.getPropertyValue('content');

処理の流れとしては

1. getComputedStyle()で指定セレクタの疑似要素のプロパティ一覧を取得する
2. getPropertyValue()でプロパティ一覧から指定したプロパティを取得する

になります