שאלה | מציאת מיקום אלמנט בדף האינטרנט

מוטי אורן

יצרתי אלמנט באמצעות JS ואני רוצה להכניס אותו למיקום של אלמנט אחר (לא אכפת לי שיסתיר אותו). הבעיה היא שב CSS אין תכונה של position ביחס לאלמנט אחר. השאלה שלי היא האם יש איזו מתודה או משהו שיביא לי את המיקום האבסולוטי של האלמנט יחסית לתגית האב שלו?
@chv יש לך מושג על משהו כזה?

chv

@מוטי-אורן אמר בשאלה | מציאת מיקום אלמנט בדף האינטרנט:

ב CSS אין תכונה של position ביחס לאלמנט אחר

יש. זה מה שנקרא absolute. האלמנט ימוקם אוטומטית (כלומר יתחיל לרנדר את המיקום השמאלי-עליון שלו) מהמקום הראשון הפנוי באלמנט שלפניו (או באלמנט האבא שלו)
אם אתה מגדיר relative האלמנט אמור להיות ממוקם רק לפי המיקום שאתה מגדיר לו (ב-left top right bottom) כלומר הוא יתעלם מהפריסה של האלמנט האבא

@מוטי-אורן אמר בשאלה | מציאת מיקום אלמנט בדף האינטרנט:

האם יש איזו מתודה או משהו שיביא לי את המיקום האבסולוטי של האלמנט יחסית לתגית האב שלו?

כן. offset.
אפשר לקבל על כל אלמנט שהוא את המיקום שלו ביחס לאבא -

element.offsetLeft
element.offsetTop

ב-Jquery יש לך גם כלים יותר חזקים לזה

לא לגמרי הבנתי איך שתי השורות בשאלה שלך קשורות זו לזו.. תכתוב יותר ברור
יכול להיות שהסיטואציה שלך יכולה להיפתר בדרך אחרת מיצירת אלמנטים והסתרה שלהם

מוטי אורן

@chv אמר בשאלה | מציאת מיקום אלמנט בדף האינטרנט:

לא לגמרי הבנתי איך שתי השורות בשאלה שלך קשורות זו לזו..

ברגע שאני יודע את המיקום של האלמנט שאותו אני רוצה להסתיר יחסית לאלמנט האב שלו, אני פשוט קובע לאלמנט שאני מכניס את אותו מיקום ב absolute. ולגבי absolute פשוט, זה לא יעזור לי פה לכאו' כי הוא נותן את המיקום ביחס לאב שלו, ואני צריך ביחס לאותו אלמנט.

אני יסביר לך מה אני מנסה לעשות. אני מנסה לכתוב קוד שאני יוכל להכניס אותו לכל אתר שהוא דרך הקונסול, וכשאני יעבור מעל כל אלמנט שהוא באתר יקפוץ לי תיבה קטנה עם הפרטים של האלמנט. אני מצרף את הקוד שיצא לי בינתיים (לא יצא לי מוצלח מידי בינתיים)

const allElements = document.body.getElementsByTagName('*');

for (let element of allElements) {
    element.addEventListener('mouseenter', (event) => {
        if (document.getElementById('HTML-div')) {
            document.getElementById('HTML-div').remove();
        }
        let div = document.createElement('div');
        div.id = 'HTML-div';
        div.style.backgroundColor = '#515151';
        div.style.color = 'white';
        div.style.textAlign = 'center';
        div.style.position = 'absolute';
        div.style.fontSize = '20px';
        div.style.padding = '10px 15px';
        div.style.fontFamily = 'Calibri';
        div.style.width = '250px';
        div.style.border = 'black 1px solid';
        div.innerText = `
            <${element.tagName.toLowerCase()}></${element.tagName.toLowerCase()}>
        `;
        element.parentElement.appendChild(div);
    })
    element.addEventListener('mouseleave', (event) => {
        let div = document.getElementById('HTML-div');
        if (div) {
            div.remove();
        }
    })
}

כמו שאתה רואה, בינתיים רק כתבתי לתוך הדיב את התגית של האלמנט, ולא יותר מידי פרטים.

chv

@מוטי-אורן
א' הקוד נראה מעולה! שאפו
ב' לא הבנתי עדיין (מוחי הקט) מה רע. אתה רוצה שהתיבה HTML-div תסתיר את האלמנט שעליו עוברים כרגע??
פשוט כי עכשיו הקוד הנוכחי עובד מעולה והתיבות הן כמו tooltip כזה, זה נראה לי מעולה

מוטי אורן

@chv אמר בשאלה | מציאת מיקום אלמנט בדף האינטרנט:

@מוטי-אורן
א' הקוד נראה מעולה! שאפו
ב' לא הבנתי עדיין (מוחי הקט) מה רע. אתה רוצה שהתיבה HTML-div תסתיר את האלמנט שעליו עוברים כרגע??
פשוט כי עכשיו הקוד הנוכחי עובד מעולה והתיבות הן כמו tooltip כזה, זה נראה לי מעולה

אם יש לי אישור שלך אז זה מצויין. עכשיו מה שנשאר זה רק לעבוד על הפרטים של האלמנט שייכנס בתוך הדיב. (אני מנסה לעשות את זה בשביל פיתוח נוח, אולי בסוף אני יעשה איזה תוסף כזה).

chv

@מוטי-אורן

רק לעבוד על הפרטים של האלמנט שייכנס בתוך הדיב

זה כבר שתי שניות. הכל כבר מוכן לך

אני מנסה לעשות את זה בשביל פיתוח נוח, אולי בסוף אני יעשה איזה תוסף כזה

רעיון מעולה