htmlの要素のパーセント表記されているwidthやheightの数値を数字で取得したい

すごい抽象的な質問になっているのですが、以下のコードのようなパーセント表記されている数字をJavaScriptで数字として取得したいです。

//例
<button style="width:50%;"></button>

getbyelementで取得したパーセントをどうにか数字にできないのか色々やってみたのですが、できませんでした。
簡単に考えてみると親要素のサイズを５０％にしてると思うのですが、取得した値で動的に大きさ変更をしたかったので、質問しました。

m.ts10806

2019/01/22 09:16

細かいですがスペルミスですね bubtton→button

tokuwgawa

2019/01/22 09:26

ありがとうございます！ Bだけ敏感なんですよね。。

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

回答3件

現状で対応しているのが Chrome (Blink) くらいですが、computedStyleMap() メソッドで単位と数値を別々に取得することができます。

JavaScript
1console.log(document.querySelector('button').attributeStyleMap.get('width').value); // 50

https://developer.mozilla.org/en-US/docs/Web/API/Element/computedStyleMap

投稿2019/01/22 09:32

x_x

総合スコア13749

ベストアンサー

html
1<!--表があって、その中の可変幅なdiv下にあるimgの大きさを毎秒consoleに出してみます
2
3適当な表-->
4<ul class="cs-table-p1">
5    <!-- 適当に画像置いときます -->
6    <li><div><img src='/assets/example/image1.png'></div></li>
7</ul>
8
9<style>
10.cs-table-p1 li div {
11    /*画面幅の半分とでもしましょう*/
12    width: 50vw;
13    height: 10vw;
14}
15
16img {
17   /*画像幅は親要素依存にしときます*/
18   width: 100%; 
19   height: 100%;
20}
21</style>
22
23<script>
24(function(){
25    //imgを取得します。配列でとってきてるので[0]ってつけてます
26    let imgs = $('.cs-table-p1 li div img')[0]
27    
28    //ブラウザのwidthを適当に変化させましょう。毎秒consoleに出力される値が変わると思います
29    setInterval(function(){
30    console.log(imgs.width)
31    }, 1000)
32})();
33
34</script>

投稿2019/01/22 09:24

編集2019/01/23 00:22

sansansandodo

総合スコア248

tokuwgawa

2019/01/23 00:32

語彙力のない質問の中的確に答えを出していただきありがとうございます！

sansansandodo

2019/01/23 01:25

参考になったようでよかったです。（めちゃ細かいんですが、まだbubttonがいますね…！！）

tokuwgawa

2019/01/23 08:27

ありがとうございました！ほんとですね。。Bが敏感なんです、、

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

stylesheetのオブジェクトを上から順番に取得します。

html
1<html>
2<head>
3  <meta charset="UTF-8">
4  <title>sample</title>
5</head>
6<style media="screen">
7.div {
8  width: 50%;
9}
10</style>
11<div id="div">
12  div
13</div>
14</article>
15<script>
16var s = document.styleSheets.item(0).cssRules.item(0).style.width;
17var x = s.slice(0,-1);
18console.log(x);
19</script>
20</body>
21</html>
22