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']
אם זה לא פיתרון למקרה שלך, אשמח לנסות לעזור.
פשוט נראה לי שהפיתרון שלך זה לא הכיוון הנכון. -
-
שמתי לב שאם אני בוחר טקסט שחלקו מוגדר לגודל אחד וחלקו השני לגודל אחר הוא בוחר את הגודל שבו התחלתי לסמן. יש דרך לגרום לו להחזיר את כל הערכים הרלוונטיים/ערך ריק?
-
@הפצת-אנקי
אתה השתמשת בbaseNode שמחזיר את תחילת הבחירה.
אתה יכול להשתמש בdegreeNode שמחזיר את סוף הבחירה. -
@גמליאל כתב בJS קבלת נתונים על תכונות של טקסט מסומן:
בdegreeNode
יש דרך למקרה שההתחלה והסוף זהים ובאמצע יש שוני?
(אולי ליצור טווח בין ההתחלה לסוף עם לולאה שרצה על הכל? ) -
כדי למנוע מצב של בעיית XY, אולי תכתוב מה בדיוק הצורך שלך, ולא מה אתה מנסה לעשות?
אולי יש פתרונות אחרים שיוכלו להציע לך. -
@הפצת-אנקי כתב בJS קבלת נתונים על תכונות של טקסט מסומן:
יש דרך למקרה שההתחלה והסוף זהים ובאמצע יש שוני?
אני רוצה שכאשר אסמן טקסט יהיה כתוב על הכפתור מהו גודל הטקסט הנוכחי
ומה אתה רוצה שיופיע בחלון כש'ההתחלה והסוף זהים ובאמצע יש שוני'?
(בWORD ועורכי טקסט אחרים, במקרה של הדגשת טקסט שכולל הגדרות עיצוב שונות בין החלקים בטקסט, החלון יהיה ריק).
-
@הפצת-אנקי זה נראה מסובך.
קל לגשת לראשון ולאחרון (או לאב המשותף לכולם), אבל ייתכן ששניהם אותו גדול ובאמצע יש גודל שונה.
אני חושב שבלי קוד מסורבל קשה לדעת (שמחפש את הטקסט בלולאה בצאצאי האב ומחליט לפי זה אלו אלמנטים נכללו בבחירה).
מראה מקום: https://javascript.info/selection-range -
9/11