cssのwidthを取得する方法について

2019/02/09 15:22

CSSをコードブロックで括ると、視認性が向上します。 https://teratail.com/help/question-tips#questionTips3-7

行動規範の内容に同意します

回答4件

ベストアンサー

jQuery
1$('#li')[0].computedStyleMap().get('width').value; // 33.33000183105469

cf. htmlの要素のパーセント表記されているwidthやheightの数値を数字で取得したい
https://teratail.com/questions/170279

投稿2019/02/12 01:47

x_x

総合スコア13749

2019/02/13 04:32

横槍失礼します。こんな死ぬほど便利なメソッドがあったとは！大変勉強になりました。ありがとうございます。

行動規範の内容に同意します

これでひとつひとつ調べていくしかないんじゃないかと思いますが……（他に方法があったらすみません）
CSSRule.cssText - Web API | MDN

投稿2019/02/09 10:42

総合スコア37409

2019/02/09 11:43

改めて調べましたが、セレクタ文字列から指定値を逆引きするAPIは用意されていないと思います。地道に繰り返し処理で探す以外にないですね。専用関数を自作すれば、使いまわしは出来ると思います。

2019/02/09 11:50

やはりそうでしたか。テキストを引っ張ってくるだけならいいですが、「実際に効いているスタイルを」みたいな話になると、ぞっとしますね。なんだか、CSSとCSSOMは、レガシー感があるような気がします。

2019/02/09 12:01

> 「実際に効いているスタイルを」みたいな話になると、 Element#matches() を組み合わせて検索すれば、比較的容易に実装可能と思います。 (未対応ブラウザ向けの Polyfill は querySelectorAll を回すぐらいしか思いつかないので、コストが高くつきますが)

2019/02/09 12:09

おお、それ、知りませんでした。ありがとうございます。ただ、いえほら、オリジンとか!importantとか詳細度とか記述順とかいろいろあるじゃないですか？もう完全に余談ですが、いっそのこと、CSSに「記述順のみ有効」みたいなフラグを定義してくれればいいのに、とか思うんですが。

2019/02/09 14:27

https://qiita.com/amamamaou/items/bb79bec002a6ff033810 これでいけるかもですね。私自身、業務で使った記憶があります。ただし、IEの後方互換なし・・・

2019/02/09 14:51

すみません、上記コメントの方法も、最終的なpx実寸が取得されてしまいました。これなかなか難しい。

2019/02/09 15:10 編集

> オリジンとか!importantとか詳細度とか記述順とかいろいろ Chrome Developper Toolsのように、カスケード処理後の上書きされていない指定値を求める、というところでしょうか。詳細度計算器を自作して、 https://triple-underscore.github.io/selectors4-ja.html#specificity-rules カスケード法に則り、有効な指定値を割り出せば、実装できそうです。 https://triple-underscore.github.io/css-cascade-ja.html#cascading Web制作者が書けるJavaScriptでは、制作者スタイルシートの領分しか参照出来ず、カスケード法に存在しているユーザスタイルシート/デフォルトスタイルシートも網羅できる開発者ツールには及びませんが…。特に、!important 規則のユーザスタイルシートは最上位で優先されるので、それがない時に有効なスタイルまでしか求められません。

2019/02/09 15:16

ところで、CSSのオリジンとは何のことでしょう？

2019/02/12 00:23

ご提示のURLでは「出自」と訳されているようですね。

行動規範の内容に同意します

実際の%自体を直接取得はできないので、段階を踏むしかないかと・・・。
現在最終的に適用されているCSSを取得できるAPIが存在しますので、それをうまく使ってみる、とかですね。
下記でいかがでしょう。

html
1<html>
2<head>
3<style>
4#hoge { width: 33.3%;}
5</style>
6</head>
7<body>
8<p id="hoge">width取得したい</p>
9
10<script>
11// 対象とそのスタイルを取得
12const pDom = document.getElementById('hoge');
13const lastStyle = window.getComputedStyle(pDom);
14// 親のスタイルを取得
15const parentStyle = window.getComputedStyle(pDom.parentNode);
16
17// 対象と親のpx横幅実寸から、%を計算
18const widthStr = (parseFloat(lastStyle.width) / parseFloat(parentStyle.width) * 100) + '%'; 
19
20</script>
21</body>
22</html>

getComputedStyleメソッドを使い、対象とその親の最終的に適用されているスタイルを取得し、
そこから割り算して、%を求めています。
ただし、このgetComputedStyleメソッドは、対象ブラウザ、わりとモダンなブラウザだけなので（特にIEのバージョンは注意）注意が必要です。

投稿2019/02/09 15:04

総合スコア9555

こちらでいかがでしょう？

JavaScript
1w = $('#li').prop('style').width;

追記：
上記は、コメントで指摘されている通りインラインで書かれているものしか当てはまらず、本質問に対する回答として不適・間違っていました。大変失礼しました。

投稿2019/02/09 10:44

編集2019/02/09 12:35

shinji709

総合スコア805

2019/02/09 11:12

基本的に % は計算値では参照できないと思います。