【JavaScript】translateX,Yの値を取得する方法を初心者でもわかりやすく解説～getComputedStyle～

JavaScript

JavaScriptで様々な要素の値を取得して操作したい時があると思いますが、そんな時には下記のように取得することが多いと思います。

element.style.プロパティ名

ですが、この手順ではすべてのプロパティの値を取得することができません。

本記事ではそんなケースにも対応できるgetComputedStyle、getPropertyValueの使用方法について初心者の方でもわかりやすく丁寧に解説していきます。

前提条件

以下のHTMLからdogsクラスを持つ要素を取得して、テキストに”ダックスフンド”と記載されているdivのtranslateを取得したいと思います。

HTML

  <body>
    <div class="dogs">柴犬</div>
    <div class="dogs">ダックスフンド</div>
    <div class="dogs">シーズー</div>
    <script src="./main.js"></script>
  </body>

CSS

.dogs{
    transform: translateX(100px);
}

CSSではあらかじめtranslateXに100pxを指定しています。

これからの手順ではこの”100″を取得するための手順となります。

この手順ではJavaScriptで設定されている各値も取得することができるため様々なプロジェクトで利用できる汎用的な方法です。

しっかりと身に着けておきましょう！

translateX,Yを取得する方法

今回ご紹介するtranslateの取得方法は以下の4つの手順を行う必要があります。

  1. 対象の要素を取得する
  2. スタイルを取得する
  3. transformプロパティを取得する
  4. translateの値を取得する

これらの手順について詳しく解説していきます。

querySelectorAllで対象の要素を取得する

まず、translateXの値を取得したい要素をJavaScriptで取得します。

要素を取得するには以下のメソッドのいずれかを使用する必要があります。

  • querySelector()
  • querySelectorAll()
  • getElementById()
  • getElementByName()
  • getElementByTagName()
  • getElementByClassName()

今回のサンプルコードでは、複数のdiv要素に対してdogsクラスが共通して定義されているためこちらを利用して要素を取得したいと思います。

クラス名を指定して要素を取得する例は以下の通りです。

const dogs = document.querySelectorAll('.dogs');

これでdogsクラスを持つdiv要素すべてを取得することができました。

Console.logの出力結果

NodeList(3) [div.dogs, div.dogs, div.dogs]
0: div.dogs
1: div.dogs
2: div.dogs
length: 3
[[Prototype]]: NodeList

スタイルを取得する(getComputedStyle)

次に、要素のスタイルを取得します。スタイルを取得するにはgetComputedStyle()を使用する必要があります。

getComputedStyleに引数として先ほど取得したdiv要素を指定します。

この時の注意点としては取得している要素がクラス名を指定しているため、NodeListという特殊な配列として保持されているということです。

そのため、今回取得したいダックスフンドのテキストを持っているdiv要素を指定するには配列を使用する場合と同様に要素番号を指定する必要があります。

指定の方法は以下の通りです。

const dogsStyle = window.getComputedStyle(dogs[1]);

Console.logの出力結果

CSSStyleDeclaration {
 0: 'accent-color',
 1: 'align-content',
 2: 'align-items',
 3: 'align-self',
 4: 'alignment-baseline',
 5: 'animation-delay',
 6: 'animation-direction',
 7: 'animation-duration',
 8: 'animation-fill-mode',
 9: 'animation-iteration-count',
 10: 'animation-name',
 11: 'animation-play-state',
 12: 'animation-timing-function',
 13: 'app-region',
 14: 'appearance',
 15: 'backdrop-filter',
 16: 'backface-visibility',
 17: 'background-attachment',
 18: 'background-blend-mode',
 19: 'background-clip',
 20: 'background-color',
 21: 'background-image',
 22: 'background-origin',
 23: 'background-position',
 24: 'background-repeat',
 25: 'background-size',
 26: 'baseline-shift',
 27: 'baseline-source',
 28: 'block-size',
 29: 'border-block-end-color',
 30: 'border-block-end-style',
…
…
…
283: 'transform'
}

取得した要素を出力してみると”CSSStyleDeclaration”というコレクションを保持していることがわかります。

こちらには現在適応されているすべてのCSSが格納されています。この中を見てみると取得したい”transform”プロパティが283番目に格納されていることがわかります。

transformプロパティを取得する(getPropertyValue)

transformプロパティを取得するにはgetPropertyValue()を使用する必要があります。

引数に取得したいプロパティ名を指定して取得対象は先ほどスタイルを取得して格納したdogsStyleです

const dogsTransform = dogsStyle.getPropertyValue('transform');

Console.logの出力結果

matrix(1, 0, 0, 1, 100, 0)

これでtransformプロパティを取得することができました。

この要領でほかにも取得したいプロパティがあれば同様に取得することも可能です。

translateXの値を取得する(正規表現)

transformプロパティからtranslateXの値を取得します。

方法はいくつかありますが、今回は不要な文字列を削除して配列としてtransformプロパティの各値を保持できるように置換していきたいと思います。

const dogsMatrix = dogsTransform.match(/^matrix\((.+)\)$/)[1].split(', ');

これで、要素のtranslateXの値を取得できます。

先ほどもお伝えしておりますが、transformプロパティにはmatrix、translate、scale、rotate、skewなどの複数の関数が含まれることがあります。

そのため、取得した値を正しく修正する必要があります。

正規表現を使用しているため少し難しく感じると思いますが、

正規表現は慣例のようなものですのでこのまま定型文として考えてみてください。

よく利用される記述方法ですが特に覚える必要もありません。

使用する際にその都度調べれば大丈夫です。私は実務でJavaScriptを使用していますが、正規表現については全く覚えていないので使用するたびに調べてから記述しています。

また、要素が複数の変換を組み合わせている場合、translateXの値を取得するためには、matrix関数から4番目の値を取得する必要があります。

Console.logの出力結果

['1', '0', '0', '1', '100', '0']

前から5番目に格納されているのがtranslateXの値になりますので、あとはこれを配列を使用するとき同様に要素番号を指定して取得します。

配列の場合は要素数を0から数えるため今回指定する値は4となります。

const dogsTranslateX = dogsMatrix[4];

Console.logの出力結果

100

最初にCSSにて設定されていたtranslateXの値である”100″を取得することができました。

すべてのコードは以下となります。

const dogs = document.querySelectorAll('.dogs');
// console.log(dogs);

const dogsStyle = window.getComputedStyle(dogs[1]);
// console.log(dogsStyle);

const dogsTransform = dogsStyle.getPropertyValue('transform');
// console.log(dogsTransform);

const dogsMatrix = dogsTransform.match(/^matrix\((.+)\)$/)[1].split(', ');
// console.log(dogsMatrix);

const dogsTranslateX = dogsMatrix[4];
//console.log(dogsTranslateX);

同様の手順でほかの要素も取得することができるため、ぜひ今回ご紹介した手順は頭に入れておきましょう

もちろん手順すべてを覚える必要がありませんがその都度調べて最短でほしい情報にアクセスできるくらいにはポイントを押さえておいてください。

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