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

2019-04-13jQuery取得

jQueryのcss()は、疑似要素のCSSプロパティに参照出来きなません
必要頻度も少ないと人生3度は躓く部分ですね

疑似要素のCSSプロパティを取得するにはJavaScriptのwindow.getComputedStyle()を利用します

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

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

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

CSS

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

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

jQuery

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()でプロパティ一覧から指定したプロパティを取得する

になります

2019-04-13jQuery取得

Posted by Yousuke.U