IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

【JS】要素中央の位置(座標)を取得する | JavaScript | jQuery

 

 

jQueryでHTML要素の中央位置(座標)を取得します。

 

var left = $(element).offset().left;
var top = $(element).offset().top;
var width = $(element).width();
var height = $(element).height();

offsetCenterLeft = left+(width/2);
offsetCenterTop = top+(height/2);

 

jQuery 拡張版

jQuery.prototype.offsetCenter=function(){
var left = this.offset().left; var top = this.offset().top; var width = this.width(); var height = this.height(); left = left+(width/2); top = top+(height/2);
return { top , left }
}

$(element).offsetCenter(); // {top:0, left:0}

 

DEMO

demo HTML CSS JS
 
 
 
<div id="get-offsetCenter_demo_offset"> </div>
<div id="get-offsetCenter_demo" style="display: inline-block; width: 100px; height: 100px; border: 1px solid; position: relative;"><em style="position: absolute; top: 50%; left: 50%; bottom: 50%; right: 50%; border: 1px solid;">&nbsp;</em></div>
<div id="get-offsetCenter_demo_display"> </div>
 
window.addEventListener("load",function(){
    
    jQuery.prototype.offsetCenter=function(){
        var left = this.offset().left;
        var top = this.offset().top;
        var width = this.width();
        var height = this.height();
        left = left+(width/2);
        top = top+(height/2);
        return { top , left }
    }

    $("#get-offsetCenter_demo").on("mousemove",(e)=>{
        $("#get-offsetCenter_demo_display").text(
            JSON.stringify($("#get-offsetCenter_demo").offsetCenter())
        );
    })
})


$(document).on("mousemove",function(event){
    $("#get-offsetCenter_demo_offset").text("y:"+event.pageY+",x:"+event.pageX);
});

 

補足

要素の横幅、縦幅の取得に.width(),.height()を使用していますが、paddingまたはmarginを設定している場合は.outerWidth(),.outerHeight()(.outerWidth(true),.outerHeight(true))を使用してください。