एक विशिष्ट निर्देशांक में DIV को कैसे रखें?

Question

मैं एक विशिष्ट निर्देशांक में एक डीआईवी की स्थिति बनाना चाहता हूं? मैं जावास्क्रिप्ट का उपयोग कैसे कर सकता हूं?

Answer 1

इसकी स्क्रिप्ट 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';
}

Comments

मैं माउस क्लिक से x, y निर्देशांक प्राप्त करता हूं, मैं माउस की स्थिति में Div कैसे प्रदर्शित कर सकता हूं?

— अदहम

@ आप पहले से ही x, y निर्देशांक है? बस उन्हें लागू करें x_pos,y_pos

— माइकल बर्कोवस्की

यह हमेशा स्थिति को गोल करता है ... क्या 2 या 1. बनने के बजाय 1.6 की तरह स्थिति निर्धारित करना संभव है

— मुहम्मद उमर

क्या होगा अगर हमारे पास कॉर्डिनेट है, (X1, y2) (x2, y2) (x3, y3) (x4, y4)?

— जॉन डीवाई

मैं ठीक वैसा ही कर रहा हूं, लेकिन मेरी डिव मेरे माउस के गर्भनाल के पास नहीं है। हालाँकि यह शीर्ष लेख के बाद मुख्य पृष्ठ के शीर्ष आरंभिक स्थान पर चला जाता है। मेरा मतलब है मास्टर डिव। क्या कोई मुझे समझने में मदद कर सकता है क्यों?

— JNPW

Answer 2

आपको ऐसा करने के लिए जावास्क्रिप्ट का उपयोग करने की आवश्यकता नहीं है। सादे-पुराने सीएसएस का उपयोग करना:

div.blah {
  position:absolute;
  top: 0; /*[wherever you want it]*/
  left:0; /*[wherever you want it]*/
}

अगर आपको लगता है कि आपको जावास्क्रिप्ट का उपयोग करना चाहिए, या यह गतिशील रूप से JQuery का उपयोग करने की कोशिश कर रहा है, तो यह "div" वर्ग के सभी divs को प्रभावित करता है:

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

वैकल्पिक रूप से, यदि आपको नियमित पुराने-जावास्क्रिप्ट का उपयोग करना चाहिए तो आप आईडी द्वारा ले सकते हैं

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

Comments

क्या? आपको myElement के बजाय .class का उपयोग करना चाहिए और x & y के बजाय ऊपर और बाएं छोड़ देना चाहिए, क्या आपको नहीं चाहिए?

— TMS

इसके साथ एक HTML तत्व का संदर्भ प्राप्त करने के अलावा document.getElemtentById(), आप इसे एक मनमाने ढंग से jQuery जैसे चयनकर्ता के साथ document.querySelector () और इसके कई रूपांतरों के साथ भी संदर्भित कर सकते हैं

— Shammel Lee

Answer 3

अच्छी तरह से यह निर्भर करता है कि यदि आप चाहते हैं कि आप एक डिव पोजिशन करें और फिर कुछ नहीं, तो आपको इसके लिए जावा स्क्रिप्ट का उपयोग करने की आवश्यकता नहीं है। आप इसे CSS द्वारा ही प्राप्त कर सकते हैं। आपके कंटेनर को किस स्थिति में रखना चाहते हैं, इसके सापेक्ष क्या है, यदि आप इसे दस्तावेज़ निकाय के सापेक्ष रखना चाहते हैं, तो आपका div निरपेक्ष होना चाहिए और इसके कंटेनर को अपेक्षाकृत या पूर्ण रूप से स्थित नहीं होना चाहिए, उस स्थिति में आपका div स्थित होगा कंटेनर के सापेक्ष।

अन्यथा Jquery के साथ यदि आप दस्तावेज़ के सापेक्ष एक तत्व रखना चाहते हैं तो आप ऑफ़सेट () विधि का उपयोग कर सकते हैं।

$(".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
});

Comments

महान @ एहतेशाम ने वास्तव में मेरी मदद की।

— आरएन कुशवाहा

Answer 4

आप स्थिति निश्चित सीएसएस संपत्ति का उपयोग भी कर सकते हैं।

<!-- html code --> 
<div class="box" id="myElement"></div>

/* css code */
.box {
    position: fixed;
}

// js code

document.getElementById('myElement').style.top = 0; //or whatever 
document.getElementById('myElement').style.left = 0; // or whatever

Answer 5

यहाँ एक अच्छी तरह से वर्णित लेख है और कोड के साथ एक नमूना भी है। जेएस निर्देशांक

आवश्यकता के अनुसार। नीचे कोड है जो उस लेख में अंतिम पर पोस्ट किया गया है। 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)
    }
}

Answer 6

मैंने इसे क्रिब किया और 'पीएक्स' जोड़ा; बहुत अच्छा काम करता है।

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 ;