回答:
左端と上端からのピクセル数として、left
それぞれのtop
プロパティとプロパティをスクリプト化します。持っているに違いないposition: absolute;
var d = document.getElementById('yourDivId');
d.style.position = "absolute";
d.style.left = x_pos+'px';
d.style.top = y_pos+'px';
または、関数として実行して、次のようなイベントにアタッチできます。 onmousedown
function placeDiv(x_pos, y_pos) {
var d = document.getElementById('yourDivId');
d.style.position = "absolute";
d.style.left = x_pos+'px';
d.style.top = y_pos+'px';
}
x_pos
、y_pos
これを行うためにJavaScriptを使用する必要はありません。昔ながらのcssを使う:
div.blah {
position:absolute;
top: 0; /*[wherever you want it]*/
left:0; /*[wherever you want it]*/
}
javascriptを使用する必要があると感じる場合、またはJQueryを使用してこれを動的に実行しようとしている場合、これは「blah」クラスのすべてのdivに影響します。
var blahclass = $('.blah');
blahclass.css('position', 'absolute');
blahclass.css('top', 0); //or wherever you want it
blahclass.css('left', 0); //or wherever you want it
または、通常の古いJavaScriptを使用する必要がある場合は、IDで取得できます。
var domElement = document.getElementById('myElement');// don't go to to DOM every time you need it. Instead store in a variable and manipulate.
domElement.style.position = "absolute";
domElement.style.top = 0; //or whatever
domElement.style.left = 0; // or whatever
document.getElemtentById()
、document.querySelector()を使用して任意のjQueryのようなセレクターおよびその多くのバリエーションで参照することもできます
まあそれはあなたが望むのはdivを配置することだけで、それ以外には何もないかどうかに依存します。そのためにJavaスクリプトを使用する必要はありません。これはCSSでのみ実現できます。重要なのは、divを配置するコンテナーに関連しています。ドキュメントボディに相対して配置する場合は、divを絶対に配置し、コンテナーを相対または絶対に配置しないでください。その場合、divは配置されます。コンテナに対する相対。
それ以外の場合、jqueryで要素をドキュメントに対して相対的に配置したい場合は、offset()メソッドを使用できます。
$(".mydiv").offset({ top: 10, left: 30 });
オフセット親に相対的な場合は、親の相対または絶対位置。次に以下を使用します...
var pos = $('.parent').offset();
var top = pos.top + 'no of pixel you want to give the mydiv from top relative to parent';
var left = pos.left + 'no of pixel you want to give the mydiv from left relative to parent';
$('.mydiv').css({
position:'absolute',
top:top,
left:left
});
これは適切に記述された記事とコード付きのサンプルです。 JS座標
要件ごと。以下はその記事でついに投稿されたコードです。getOffset 関数を呼び出して、その上と左の値を返すhtml要素を渡す必要が あります。
function getOffsetSum(elem) {
var top=0, left=0
while(elem) {
top = top + parseInt(elem.offsetTop)
left = left + parseInt(elem.offsetLeft)
elem = elem.offsetParent
}
return {top: top, left: left}
}
function getOffsetRect(elem) {
var box = elem.getBoundingClientRect()
var body = document.body
var docElem = document.documentElement
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
var clientTop = docElem.clientTop || body.clientTop || 0
var clientLeft = docElem.clientLeft || body.clientLeft || 0
var top = box.top + scrollTop - clientTop
var left = box.left + scrollLeft - clientLeft
return { top: Math.round(top), left: Math.round(left) }
}
function getOffset(elem) {
if (elem.getBoundingClientRect) {
return getOffsetRect(elem)
} else {
return getOffsetSum(elem)
}
}
これをクリビして「px」を追加しました。とてもうまくいきます。
function getOffset(el) {
el = el.getBoundingClientRect();
return {
left: (el.right + window.scrollX ) +'px',
top: (el.top + window.scrollY ) +'px'
}
}
to call: //Gets it to the right side
el.style.top = getOffset(othis).top ;
el.style.left = getOffset(othis).left ;