jQuery – שינויים ב-CSS

מאמר זה מלמד שינויי CSS שאפשר לעשות עם jQuery.

במאמרים הקודמים דנו בסלקטורים של jQuery, אירועים ב-jQuery, אפקטים ב-jQuery וכן מניפולציות בתוכן HTML ב-jQuery. במאמר זה נדון בכיצד אפשר לשנות תכונות CSS של אלמנטים.

כדרכנו בקודש אסקור את הדוקומנטציה של jQuery בנושא CSS עם דוגמאות זהות. הדוגמא שאני משתמש בה, שזהה לזו שהשתמשתי בה בעבר היא של כפתור שמפעיל אירוע על פסקה – p דוגמא. על פסקת הדוגמא הזו אעשה את המניפולציות ב-CSS.

קוד הדוגמא משתמש בכל האלמנטים שדנו בהם בעבר. יש בו סלקטור של הכפתור שאליו אני מצמיד אירוע לחיצה שבתורו משפיע על p שה-id שלה הוא example. ככה זה נראה:

פסקת דוגמא


<p id="example1"> 
פסקת דוגמא
</p> 
<p><button id="myButton1">Do the Action</button></p>

והקוד של jQuery נראה כך:


$(document).ready(function() {
$("#myButton1").click(function () {
$("#example1").HERE I PUT MY FUNCTION;
})
;});

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

אחזור תכונות CSS

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

פסקת דוגמא

והקוד נראה כך: פשוט וקל. אפשר לאחזר את כל התכונות שקיימות לאלמנט ב-DOM הקיים.


$(document).ready(function() {

$('#myButton2').click(function () {
var color = $('#example2').css('color');
alert(color);
});
});

שינוי תכונת CSS

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

פסקת דוגמא

הקוד הוא פשוט עד כדי גיחוך:


$('#myButton3').click(function () {
$('#example3').css('color', 'red');
});

שינוי תכונות של CSS

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

פסקת דוגמא

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


$('#myButton4').click(function () {
$('#example4').css({'color' : 'red' , 'font-size' : 'large'});
});

אחזור מיקום

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

פסקת דוגמא


$('#myButton5').click(function () {
var offset = $('#example5').offset();
alert("left: " + offset.left + ", top: " + offset.top);
});

אחזור מיקום פנימי

scrollTop

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

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

פסקת דוגמא: טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט

הסינטקס הוא פשוט למדי, פשוט קוראים לפונקציה והיא מחזירה לנו מספר.



$('#myButton6').click(function () {
var scrollTop = $('#example6').scrollTop();
alert(scrollTop);
});

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

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


$('#myButton7').click(function () {
$('#example7').scrollTop(150);
});

scrollLeft

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

פסקת דוגמא: טקסטטקסטטקסטטקסטטקסטטקסטטקסטטקסטטקסטטקסטטקסטטקסטטקסטטקסטטקסטטקסטטקסטטקסטטקסט

וככה זה קורה:


$('#myButton8').click(function () {
var scrollLeft = $('#example8').scrollLeft();
alert(scrollLeft);
});

גם כאן אני יכול לקבוע לאן לגלול בעזרת אותו סינטקס כמו scrollTop ולפיכך לא אתן דוגמא.

פונקציות CSS מקוצרות

בנוסף לקביעת ה-CSS באמצעות פונקצית css שדנו עליה לעיל, ישנן עוד כמה פונקציות הקשורות למיקום שהן נפרדות מה-css. את חלקן אפשר לבצע עם פונקצית css ואת חלקן לא ניתן. אני אעבור עליהן בקצרה:

height

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

פסקת דוגמא

וזה נעשה באמצעות הקוד הבא:


$('#myButton9').click(function () {
var height = $('#example9').height();
alert(height);
});

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

פסקת דוגמא

והקוד שבשלב זה לא ממש אמור להפתיע:


$('#myButton10').click(function () {
$('#example10').height(100);
});

שאר הפונקציות שמתנהגות בדיוק כמו פונקצית height הן:

width – מאחזרת וקובעת את הרוחב של האלמנט.

innerHeight- מאחזרת וקובעת את הגובה הפנימי של האלמנט – עם padding אבל בלי border.

outerHeight – מאחזרת בלבד את הגובה החיצוני של האלמנט, עם padding ו border. אם אנו מעבירים בתוכה פרמטר true באופן הזה: outerHeight(true אז מתקבלת התוצאה עם margin.

outerWidth – כמו outerHeight רק לרוחב ולא לגובה. גם דרכה אפשר להעביר פרמטר true לקביעת הרוחב כולל ה-margin.

עד כאן בנוגע לפונקציות של jQuery שמבצעות שינויים ב-css. במאמר הבא אני דן באפשרויות של jQuery לשנות attributes.