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

לדוגמא, ניסיתי:

קוד:

/* JS Code */
obj.className = 'class1, class2';

ורק class2 עובד.
בעבר ניסיתי את אותו הדבר [הפרדות באמצעות פסיק] על המאפיין class של אלמנט מסויים, לדוגמא div, וזה עבד טוב מאוד.

איך אפשר לעשות את זה באמצעות JS?

תודה מראש

עריכה:

ואם כבר אז עוד שאלה:

איך אני יכול לדעת מתי העכבר עוצר על מיקומו של אלמנט כדי להפעיל פונקציה?
לדוגמא כמו מה שמבצע המאפיין alt בתג img, או המאפיין title בתג td: אם נותנים למאפינים אלה ערכים, אז כשעוצרים כ-שניה אחת על האוביקט, מופיע הטקסט בצבע שחור על רקע צהוב-בהיר.

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

שוב תודה מראש.

האם JavaScript יכול לזהות ערכים של רוחב וגובה שנקבעו ב-CSS (ואך ורק ב-CSS, ולא באמצעות JS) ?

ניסיתי לגשת בצורה הבאה:

קוד:

obj.style.width

אבל זה כמובן לא עזר ולא נתן שום ערך.

תודה מראש...!

רק הערה קטנה - אני מנסה כמה שפחות להשתמש בפקודות JS הדומות לנ"ל, היכולות להאט את מהירות "ריצת" הקוד.

1. התחביר של קביעת מספר מחלקות עבור אלמנט אחד הוא כזה:
class/className = "class1 class2"
(class אם זה אטריבוט של האלמנט ו className אם זה מאפיין של האובייקט)

2. elem.style מחזיר רק style שנקבע על ידי אטריבוט style. הדרך הנכונה לקבל את הסטייל שאיתו רינדרו את האובייקט הוא ע"י document.defaultView.getComputedStyle, אבל בIE6 זה לא עובד (שוק) ואולי גם בIE7, לא בדקתי אף פעם, אז בIE תשתמש בcurrentStyle

1. מוזר אני ניסיתי את האפשרות הזו וזה לא הצליח בהתחלה.

2. בדרך הזו אפשר לקבל רק מידע מועט מאוד על ה-style של האלמנט ולכן זה לא שימושי כל כך...את הערך של ה-width של האלמנט אי אפשר לקבל בדרך זו...אני מניח שעדיף לי לקבוע לו את ה-width באמצעות JS דרך המאפיין style.

תודה על העזרה!

מעט מידע? אפשר לקבל את כל המידע שהיית יכול לקבל בדרך אחרת.

הנה תדפיס שעשיתי של המאפיינים (תבדוק בפיירפוקס ובIE)

https://2007-uploaded.fresh.co.il/2...1/11689914.html

(1.) נכון...זה מביא את כל המידע הזה ב-IE אבל כשזה מדובר ב-FF ובדפדפנים אחרים זה מביא פחות...
http://www.quirksmode.org/dom/getstyles.html
[למטה בעמוד]


(2.) אין לי מושג מה כתבת שם ב-Source של העמוד
זה שפה חדשה או עדיין JS?

(3.) ואני יודע שזה לא קשור אבל אני לא מבין למה כשאני כותב event במסמך HTML, פיירפוקס תוקע את כל הסקריפט ולא מאפשר לו לרוץ?!

הקוד הבא:

קוד:

var e = (e) ? e : event;

דופק לי את כל הסקריפט ב-FF. במיוחד המילה event.

1.זה לא סותר מה שאמרתי. כל דרך אחרת לקבל מאפיינים שלא הגדרת הייתה מחזירה לא יותר מידע. (למעט אולי תכסיסים ספציפיים עבור מאפיינים מסויימים)
2.
זה עדיין JS הישן והטוב...מה בדיוק מוזר שם?
3. סביר להניח שזה העובדה שאתה מגדיר מחדש את e עם var.

1. אבל בכל מקרה לדפדפנים האחרים אין אפשרות לגשת למידע ...

2. הסימן של הדולר. משתמשים בו ב-PHP ופתאום אני רואה אותו פה.
ראיתי אותו בעבר בסקריפטים אחרים וגם אז לא הבנתי מה זה עוזר ממש...

3. לא...ה-event כנראה באמת מקולקל - quirksmode כותבים את המשפט בצורה אחרת:

קוד:

var e = e || window.event;

ועכשיו זה באמת עובד בלי תקלות גם ב-FF. סך הכל להוסיף window

4. ואחרון להיום:
https://2007-uploaded.fresh.co.il/2...1/18445763.html

הקובץ הנ"ל מכיל את הפונקציה שאני רוצה לעשות.
היא עובדת ברובה מצוין במיוחד ב-IE.
אבל ב-FF יש תקלה מעצבנת והאלמנט שנוצר שהוא הקופסה שמופיעה במעבר העכבר על ה-div, לא זז למיקומו של העכבר.

מה לא טוב כאן?
עשיתי
position : absolute ב-CSS
והאופן שבו הגדרתי את המיקום שלו (obj.style.left וכו') הוא נכון, בדקתי את זה.

אני לא מבין מה ה-FF רוצה ממני עכשיו.

תודה על התשובות!

1. ברוב הדפדפנים הגדולים תקבל את רוב המידע. אין דרך יותר טובה.
2. זה סתם פונקציה שהגדרתי. זה מין קיצור שנהיה נפוץ בפריימוורקים של JS/AJAX, אז אימצתי משם את הרעיון
3.
https://2007-uploaded.fresh.co.il/2...1/86385628.html
4.

קוד:

		document.body.onmousemove = function(e)
		{	
			e =e?e:event;
			msg.className = 'show';
			msg.style.left = ( (wX - e.clientX) < (width + 12) ? (e.clientX - (width + 10)) : (e.clientX + 10) ) + 'px';
			msg.style.top = ( (wY - e.clientY) < (height + 22) ? (e.clientY - (height + 10)) : (e.clientY + 10) ) + 'px';
		};

תחליף בזה את הפונקציה המקורית, ככה:

https://2007-uploaded.fresh.co.il/2...1/67695401.html

3. עכשיו, מבלי שאפילו ארצה בכך, התעדכן לי ה-FF בדיוק כשבאתי לבדוק את זה.
אז אני לא יכול עכשיו ממש לבדוק את זה חח

4. IE ופיירפוקס מתייחסים בשונה להגדרת משתנה גלובאלי?

אני בכוונה מההתחלה לא שמתי את זה בתוך הפונקציה onmousemove.
כל פעולה שאני מכניס לפונקציית האירוע הנ"ל יכול להאיט...לכן אני אישית מעדיף לשים את זה מבחוץ.
יש דרך להשאיר את זה בחוץ אבל שעדיין FF יתיחס לזה?

אני מנסה לחפש אתר שיכול לומר את רוב ההבדלים החיוניים בין הדפדפנים העיקריים האלה (וגם בין עוד כמה דפדפנים). בינתיים היחידי שמצאתי זה http://www.quirksmode.org אבל כנראה חסר שם כמה דברים, למרות שהוא מאוד טוב ומפרט על נושאים.

אני שם לב גם שהטקסט יוצא מהקופסה שמופיעה ליד ה-div כשעוברים עליו עם העכבר...כנראה כל הטקסט עובר את ההגדרות של הגובה. איך אפשר לסדר את זה?
חוץ מ-overflow:hidden או auto וכדו'

תודה

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

בקשר לבעיה האחרונה שציינת: בכלל לא ראיתי שיש שם עוד תיבה...בכל מקרה אני ממש עייף עכשיו, אני אעבור על זה מחר

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

https://2007-uploaded.fresh.co.il/2...2/65629479.html

הנה הקוד הנקי

https://2007-uploaded.fresh.co.il/2...2/50539756.html

נכון מאוד עובד מצוין תודה רבה!

אני אשב על זה מחר ואקרא את הקוד איך זה פועל

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

תשאיר לי את הגירסה המהירה אני רוצה להשתפר ולנסות בעצמי גם בתחום הזה

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

ישבתי על מה שכתבת והבנתי..צריך גם לכלול את הscroll שנעשה בדף כי המיקום של העכבר וגודל החלון הפנימי נעשה בלי חישוב ה-scroll.

ובמקום ליצור אלמנט DIV בתוך מסמך ה-HTML, מצאתי פיתרון יעיל יותר והרבה יותר קל
צריך להגדיר ב-CSS:

קוד:

height: auto !important;

הסיבה היא ש-FF ודפדפנים אחרים גורמים לטקסט לעבור את האלמנט אם הוגדר לו גובה ספציפי.
Source: http://www.quirksmode.org/css/quirksmode.html - בשורה של overflow: visible, כמעט הכי למטה בעמוד. זה פשוט אתר מדהים יש שם נושאים רבים על הבדלים בין דפדפנים ודרכים להתגברות על הבעיות.

וכדאי גם לעשות את זה important...לא מזיק...
למרות שאני לא הכי מבין למה מתכנתים עושים את זה (ודברים אחרים) important, הרי בכל מקרה ההגדרות הרגילות של המתכנת עוברות את ההגדרות הרגילות של המשתמש, חוץ מההגדרות החשובות של המשתמש.
זה לא מיותר לשים important ?

1. אין צורך בauto, פשוט אל תגדיר גובה. זה בדיוק העניין בauto, זה אוטומטי
2. " ובמקום ליצור אלמנט DIV בתוך מסמך ה-HTML, מצאתי פיתרון יעיל יותר והרבה יותר קל" - ניסוח קצת לא ברור, לא הבנתי למה התכוונת
3.http://www.w3.org/TR/REC-CSS2/casca...important-rules
במקרה שלך כל ההגדרה מיותרת, וגם הimportant

1. אני הגדרתי גובה auto כיוון שאני זוכר שלפי התקן, אם מגדירים צבע-רקע אז חייב גם להגדיר צבע-כתב, ואותו הדבר הפוך (אם מגדירים צבע-כתב חייב להגדיר צבע-רקע). אז חשבתי שזה חל על הרוחב והגובה.

בכל זאת זה לא מפריע אם אני אגדיר...

2. בדף שאתה שלחת, העדכני ביותר, הוספת 2 תגים של div שהם למעשה הקופסה שמופיעה במעבר עכבר על תגי ה-div האחרים:

קוד:

<div class="hide" style="width: 250px; height: 50px;" id="mMsg">The message that suppose to be shown near the mouse!<br>Text Text Text Text Text Text <br>Blattt</div><div class="hide" style="width: 250px; height: 50px; left: 535px; top: 103px;" id="mMsg">The message that suppose to be shown near the mouse!<br>Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 <br><br>Text 2 Text 2 <br>Text 2 Text 2 <br>Text 2 Text 2 </div>

אז יש אפשרות להציג את הקופסה כראוי מבלי להוסיף את התגים\הקוד הנ"ל. (ע"י קביעת גובה auto ולא קביעת גובה ספציפי).

3. אז למעשה ה- !important חשוב רק ב-CSS1. השאלה היא באיזה מקרה מופעל CSS1, ובאיזה מקרה מופעל CSS2? הדפדפנים קובעים איזה מהם יופעל או שאני קובע לפי ה-DTD?

בקשר ל1, זה לא מזיק אבל זה מיותר...ככה שזה תלוי בך

2. זה פשוט טעות...כששמרתי את הקוד מקור מפיירפוקס זה כלל את השינויים שנעשו ב javascript. זה מיותר לגמרי, טעות בהעתקה. זה לא משפיע על הקוד בשום אופן.

3. האמת אין לי תשובה...אני בכל מקרה לא משתמש בזה.

attribute = מאפיין [לא קל יותר לומר "מאפיין"?...].

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

קוד:

function getStyle(element, style)
{
	if(document.defaultView && document.defaultView.getComputedStyle)
		return eval('document.defaultView.getComputedStyle(elemen  t, "").' + style);
	else if(element.currentStyle)
		return eval('element.currentStyle.' + style);
}

אני אומר אטריבוט פשוט כדי להבדיל בין מאפיין בXML/HTML (שבאנגלית attribute), לבין מאפיין של אובייקט (שבאנגלית קרוי לרוב property). בעברית מאפיין מתאים לשניהם, למרבה הצער, ולכן רציתי למנוע בלבול.

ובקשר לפונקציה, לא עדיף בלי eval?

קוד PHP:

 function getStyle(element, style)
{
    if(document.defaultView && document.defaultView.getComputedStyle)
        return document.defaultView.getComputedStyle(elemen  t, "")[style];
    else if(element.currentStyle)
        return element.currentStyle[style];
} 


וזה זהה לפונקציה בה אני משתמש ברוב המקרים

בענין הדקדוקי, חשבתי על זה בעבר הרחוק, גם שקלתי לקרוא ל-attribute תכונה, אבל כנראה שההגדרה מאפיין, לא ממש מבלבלת.

את הקוד כתבתי ממש מזמן, אם איני טועה, גם אני בתחילה לא השתמשתי ב-eval, אבל כנראה שבמצב או דפדפן כלשהוא היתה תקלה ולכן הוספתי את ה-eval.
אשמח אם תבדוק את הפונקציה בשועל וב-IE ואף באחרים.

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

גם כשאתה כותב משפט בעברית, תכתוב: attribute.

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

אגב, אני ממליץ על הוספת else נוסף בפונקציה, שתזחיר false במקרה של דפדפן שלא מכיר את הקוד הנ"ל (או אולי להשתמש ב-try-catch, למקרה של תקלה). כך יתאפשר בקוד "הקורא" (בקוד שקורא לפונקציה), לבצע את הבדיקה:

קוד:

if(r===false)

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

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

Link

הרגע בדקתי את השלשה, וכולם החזירו את הערך העדכני
איזה גירסא של אופרה יש לך?

קוד:

Version	8.54 	
Build	7730 	
Platform	Win32 	
System	Windows XP

אצלי

ציטוט:

Version 9.10 Build 8679 Platform Win32 System Windows XP

לא יודע...יתכן שמדובר בבאג שתוקן...

באמצעות offsetWidth ו- offsetHeight
איך לא חשבתי על זה קודם?

מקור:

http://www.quirksmode.org/js/elementdimensions.html

וזה עובד טוב בכל הדפדפנים! [הידועים והמוכרים]
זה גם מחזיר את הרוחב ביחד עם ה-border !