jQuqeryで、画面のwidthじゃなくて、HTMLのwidthを取得したい

Question

これ、「100px」じゃなく「200px」を取得したいんですけど・・・・・なんとかできませんでしょうか？

画面ではたしかに「100px」で表示されますが、欲しいのは「width」にある「200px」なんです。

▼サンプル
https://jsfiddle.net/t83721jx/

▼コード

<div class="flex">
  <div class="one" style="min-width:100px; width:200px;">
    <div class="a">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  </div>
  <div class="two" style="min-width:500px;">
    <div class="a">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  </div>
</div>

.flex {
    display: flex;
    justify-content: space-between;
    align-items: start;
    width: 500px;
}

var width = $('.one').css('width');
console.log(width); // 200pxを取得したい

Comments

[tanishi_a]

(違ったので削除)

Answer 1

こんにちは

以下のような方法はいかがでしょうか？

まず、スタイルの "min-width:100px; width:200px;" といった文字列から以下のようなオブジェクト

{
  "min-width": "100px",
  "width": "200px"
}

を得る関数を作ります。ただ、これを自作するのはけっこう大変なので、以下の質問への回答から拝借します。

• stackoverflow Javascript / convert CSS style string into JS object

ざっと見たところ、この回答 (by shujiさん)のコードが良さそうな気がしましたので、これを使って

// FYI: https://stackoverflow.com/a/33030078
function getStyleObj(cssText) {

  var regex = /([\w-]*)\s*:\s*([^;]*)/g;
  var match, properties={};
  while(match=regex.exec(cssText)) properties[match[1]] = match[2].trim();
  
  return properties;
}

という関数を作っておきます。あとは、これを使って

let w = getStyleObj($('.one').attr('style')).width;

とします。

• 動作確認用 CodePen: https://codepen.io/jun68ykt/pen/XWWpoER?editors=1111

以上、参考になれば幸いです。

Comments

[tefu-tefu]

くぅ、かっこいい兄貴がいる！ありがとうございます！
実はその後「オブジェクトを作って取得」という流れで自分なりに実現できました↓
https://teratail.com/questions/218754
でもこの自分のコードがかっこ悪かったので、ご回答のかっこいいやつを使わせていただきます！ありがとうございます！大感謝です！

[jun68ykt]

どういたしまして。
なるほど。ご自身で挑戦されたわけですね。それはとてもよい試みと思います。

個人的には、このような、「スタイルの文字列から、その内容を含むオブジェクトを得る」的な、誰でも欲しい場面がありそうな問題のコードを書かなければならない場面に出くわしたときは、たいていstackoverflow 頼みです。

今回も、回答に載せたstackoverflow の投稿を知っていたわけではなく、「style string to object」でググったところ、上位に出てきたので、すぐに辿りつきました。

けれども、かっこ悪くても自作したものを質問として晒すのは大変よいことと思います ????