横幅の最大値を指定した要素の横幅を動的に取得したい

Javascript
1 contens="hogehogehoge";
2 ItemMaxWidh=350;
3 ItemMaxHeight=
4var element=$("[name=hoge]");
5  element.click(function (e) {
6    var posX = e.pageX;
7    var posY = e.pageY;
8    var aX = window.innerWidth;
9    var aY = window.innerHeight;
10    var bX = $(window.top.document).find("body").width();
11    var bY = $(window.top.document).find("body").height();
12    
13         var dialog = $(window.top.document).find("div#hoge");
14   var tag "<div style=\"overflow:auto; max-height:" + ItemMaxHeight + "px; \">"
15        +decodeHTML(contents)+"</div>"
16        dialog.html(tag);
17   dialog.css("max-width", ItemMaxWidth + "px").css("word-wrap", "break-word").css("max-height", ItemMaxHeight + "px");
18   var dialogX = dialog.outerWidth(true);
19  var dialogY = dialog.outerHeight(true);
20    
21});
22

困っていること
上記コードで、max-widthをjqueryで設定し、そのあと、outerWidthで要素の幅を取ると、実際のサイズではなく、max-widthで指定した値が取れる

・知りたいこと
横幅サイズが、要素の内部の文字列によってかわるので、その横幅サイズを動的に取得したい。

・わかったこと
Width,Heightが指定されていないとき、自動的にwidth:auto, height:autoになるみたいです。

※これとは全く関係ないですが、前回の内容で、質問者として不適切な対応でした。すみませんでした。

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

回答1件

ベストアンサー

要素の横幅を取得したい場合は、jQueryならば$('#hoge').width()で取得できます。

・知りたいこと
横幅サイズが、要素の内部の文字列によってかわるので、その横幅サイズを動的に取得したい。

ということですので、簡単なサンプルを置いておきますね。

html
1<html>
2<head>
3  <meta charset="UTF-8">
4  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
5  <style>
6  #hoge{
7    display:inline-block;
8    background-color:gainsboro;
9  }
10</style>
11</head>
12<body>
13  <div id="hoge">あいうえお</div>
14  <div id="display"></div>
15  <input type="button" id="button" value="ボタン">
16  
17  <script>
18  $('#display').text($('#hoge').width());
19  
20  $('#button').click(function (e) {
21    $('#hoge').text($('#hoge').text()+"あいうえお");
22    $('#display').text($('#hoge').width());
23    console.log($('#hoge').width());
24  });
25  </script>
26
27</body>
28</html>
29