JS קבלת נתונים על תכונות של טקסט מסומן

[הפצת אנקי]

אתן כדוגמא את הטקסט עם הhtml שבשורה הבאה:

<span style="font-size: 48pt!important;">כתב גדול <span style="font-size: 24pt!important;">כתב בינוני</span> <span style="font-size: 11pt!important;">כתב קטן</span></span>

אני מעוניין לקבל את הנתון מהו גודל הכתב שאסמן עם העכבר. כתבתי לצורך זה את הקוד להלן. הבעיה בו שהוא תמיד בוחר את התגית הכי פנימית מה שאומר שגם אם אסמן את המילים "כתב גדול" הוא יתן לי את הנתון 11pt.

function gText(e) {
  var elmnt = document.activeElement.shadowRoot.querySelectorAll("span");
  var sizes = ["גודל כתב"];
  var fonts = [" גופן "];
  elmnt.forEach((sel) => {
    sizeval = sel.style["font-size"].replace("pt", "");
    if (sizeval != "") {
      sizes.unshift(sizeval);
      console.log(sizes);
      // } else {
        //   document.getElementById("size").textContent = "גודל כתב";
      }
      document.getElementById("size").textContent = sizes[0];
      sizes = ["גודל כתב"];
  });
  elmnt.forEach((sel) => {
    fontval = sel.style["font-family"]; 
      if (fontval != "") {
        fonts.unshift(fontval);
        // } else {
          //   document.getElementById("font").textContent = "גופן";
      }    
    document.getElementById("font").textContent = fonts[0].slice(1, -1);
    fonts = [" גופן "];
  });
}

document.onmouseup = gText;

[חגי]

@הפצת-אנקי
אני יכול להציע פיתרון חלופי?

getComputedStyle(document.getSelection().baseNode.parentElement)['font-size']

אם זה לא פיתרון למקרה שלך, אשמח לנסות לעזור.
פשוט נראה לי שהפיתרון שלך זה לא הכיוון הנכון.

[הפצת אנקי]

@חגי עבד עם שינוי קטן שרלוונטי למה שאני צריך (אנקי).

  var sz = getComputedStyle(
    document.activeElement.shadowRoot.getSelection().baseNode.parentElement
  ).getPropertyValue("font-size");
  console.log(sz.slice(0, -2)*72/96);

[הפצת אנקי]

שמתי לב שאם אני בוחר טקסט שחלקו מוגדר לגודל אחד וחלקו השני לגודל אחר הוא בוחר את הגודל שבו התחלתי לסמן. יש דרך לגרום לו להחזיר את כל הערכים הרלוונטיים/ערך ריק?

[גמליאל]

@הפצת-אנקי
אתה השתמשת בbaseNode שמחזיר את תחילת הבחירה.
אתה יכול להשתמש בdegreeNode שמחזיר את סוף הבחירה.

[הפצת אנקי]

@גמליאל כתב בJS קבלת נתונים על תכונות של טקסט מסומן:

בdegreeNode

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

[חגי]

כדי למנוע מצב של בעיית XY, אולי תכתוב מה בדיוק הצורך שלך, ולא מה אתה מנסה לעשות?
אולי יש פתרונות אחרים שיוכלו להציע לך.

[הפצת אנקי]

@חגי יש לי כפתור שפותח תפריט לשינוי גודל טקסט. אני רוצה שכאשר אסמן טקסט יהיה כתוב על הכפתור מהו גודל הטקסט הנוכחי בpt (לעיל עשיתי המרה מpx אם שמת לב..)

[גמליאל]

@הפצת-אנקי כתב בJS קבלת נתונים על תכונות של טקסט מסומן:

יש דרך למקרה שההתחלה והסוף זהים ובאמצע יש שוני?

אני רוצה שכאשר אסמן טקסט יהיה כתוב על הכפתור מהו גודל הטקסט הנוכחי

ומה אתה רוצה שיופיע בחלון כש'ההתחלה והסוף זהים ובאמצע יש שוני'?

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

[הפצת אנקי]

@גמליאל ריק יכול להיות טוב. אולי יותר טוב שיוצג טווח משהו כמו 10-22.

[dovid]

@הפצת-אנקי זה נראה מסובך.
קל לגשת לראשון ולאחרון (או לאב המשותף לכולם), אבל ייתכן ששניהם אותו גדול ובאמצע יש גודל שונה.
אני חושב שבלי קוד מסורבל קשה לדעת (שמחפש את הטקסט בלולאה בצאצאי האב ומחליט לפי זה אלו אלמנטים נכללו בבחירה).
מראה מקום: https://javascript.info/selection-range