אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » jQuery » jQuery – שינויים ב-CSS

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

רן בר-זיק מאי 26, 2009 10:40 pm אין תגובות

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

המאמר הקודם ללימו jQueryjQuery – שינויים ב-HTML חלק ב'
המאמר הבא ללימוד jQueryjQuery – שינויי Attributes
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

במאמרים הקודמים דנו בסלקטורים של 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.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
ספרית jQuery
ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד