jQueryを使わない方法「エレメントのサイズを取得」

2015年1月18日

Javascript Tips プログラミング

対象エレメントのサイズを取得するプログラムですが、posと合わせて、1つのエレメントの座標で左上のポイントを取得し、サイズを取得する事で右下ポイントが取得できる。

概要

IE6などの旧IEにも対応。

仕様

param @ e : サイズを取得したいエレメント return @ [type:json] {x:幅,y:高さ}

コード

(function(){ var $$={}; //指定したエレメントのサイズを取得 $$.size = function(e){ //対象element if(typeof(e)=='undefined'){ if (navigator.userAgent.match("MSIE")&&document.compatMode!='BackCompat'){ e = document.documentElement; } else{ e = document.getElementsByTagName("body")[0]; } } //サイズ取得; var size={ x:e.offsetWidth, y:e.offsetHeight }; //子階層依存※下に1つのみの子を持つ場合サイズチェックを行う; if(e.childNodes.length==1 && e.tagName=='A'){ var chk ={ x:e.childNodes[0].offsetWidth, y:e.childNodes[0].offsetHeight }; if(chk.x > size.x){ size.x = chk.x; } if(chk.y > size.y){ size.y = chk.y; } } return size; }; //グローバル変数へ格納 window.$$LIB = $$; //プログラム構造を返す(別変数に格納できる) return $$; })();

使い方

var elm_size = $$LIB.size(document.getElementById("hoge")); //幅と高さが表示される。※コンソール表示はサンプルです。 console.log(elm_size.x +" / "+ elm_size.y);
  • 名無し
    2017/05/02 at 10:52
    (^^;)(^^;)(^^;)(^^;)(^^;)(^^;)(^^;)(^^;)(^^;)(^^;)(^^;)(^^;)(^^;)(^^;)

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。