הוספה בגרסה: 1.0
מחזיר מאפיין סגנון של אלמנט ראשון בהתאמה.
קיצור מאפיינים
(
למשל,
margin, background, border
)
לא נתמך.
למשל, אם צריך לקבל ערך
margin,
תכתבו:
$(elem).css('marginTop') ו- $(elem).css('marginRight'),
וכך הלאה.
דוגמאות
דוגמה 1
מקבל גישה לצבע רקע של אלמנט div, שעליו משתמש לחץ.קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.5.js"></script> <script> $(document).ready(function(){ $("div").click(function () { var color = $(this).css("background-color"); $("#result").html("That div is <span style='color:" + color + ";'>" + color + "</span>."); }); }); </script> <style> div { width:60px; height:60px; margin:5px; float:left; } </style> </head> <body> <span id="result"> </span> <div style="background-color:blue;"></div> <div style="background-color:rgb(15,99,30);"></div> <div style="background-color:#123456;"></div> <div style="background-color:#f11;"></div> </body> </html>
הוספה בגרסה: 1.0
מגדיר מאפיינים של סגנון css על כל אלמנטים בהתאמה, משתמש באובייקט, שמכיל זוגות מפתח/ערך.
זאת דרך הטובה להגדיר כמות גדולה של מאפיינים של סגנון עבור כל אלמנט בהתאמה.
שימו לב, שאם מפתח מכיל מקף, למשל, "background-color," , אז יש להכניס אותו בגרשיים, או לרשום בצורה הבאה ( camel case ) כמו: backgroundColor. מכיוון ש "float" ו- "class" הן מילים שמורות ב- JavaScript, מומלץ לעטוף אותן עם גרשיים. jQuery מנרמל מאפיין "opacity" ב-Internet Explorer.דוגמאות
דוגמה 1
מגדיר צבע של גופן של כל הפסקאות וצבע רקע: $("p").hover(function () {
$(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
}, function () {
var cssObj = {
'background-color' : '#ddd',
'font-weight' : '',
'color' : 'rgb(0,40,244)'
}
$(this).css(cssObj);
});
קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.5.js"></script> <script> $(document).ready(function(){ $("p").hover(function () { $(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'}); }, function () { var cssObj = { 'background-color' : '#ddd', 'font-weight' : '', 'color' : 'rgb(0,40,244)' } $(this).css(cssObj); }); }); </script> <style> p { color:green; } </style> </head> <body> <p> Move the mouse over a paragraph. </p> <p> Like this one or the one above. </p> </body> </html>
דוגמה 2
אם שם מאפיין מכיל "-", יש לשים אותו בין הגרשיים: $("p").hover(function () {
$(this).css({ "background-color":"yellow", "font-weight":"bolder" });
}, function () {
var cssObj = {
"background-color": "#ddd",
"font-weight": "",
color: "rgb(0,40,244)"
}
$(this).css(cssObj);
});
קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.5.js"></script> <script> $(document).ready(function(){ $("p").hover(function () { $(this).css({ "background-color":"yellow", "font-weight":"bolder" }); }, function () { var cssObj = { "background-color": "#ddd", "font-weight": "", color: "rgb(0,40,244)" } $(this).css(cssObj); }); }); </script> <style> p { color:green; } </style> </head> <body> <p> Move the mouse over a paragraph. </p> <p> Like this one or the one above. </p> </body> </html>
הוספה בגרסה: 1.0
מגדיר ערך של מאפיין סגנון אחד עבור כל אלמנטים בהתאמה.
אם צוין מספר, אז הוא אוטומטי יהומר לערך בפקסלים, עם חריגים הבאים:
z-index, font-weight, opacity, zoom ו- line-height.
כדי למחוק מאפיין מאלמנט, תשתמשו בערך עם מחרוזת רייקה.
ארגומנטים
name
שם של המאפיין להגדרה.
שם של המאפיין להגדרה.
במקרה של
Callback,
ההקשר הוא לשינוי אלמנט
DOM.
דוגמאות
דוגמה 1
מחליף צבע של כל פסקה לאדום באירוע mouseover.קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.5.js"></script> <script> $(document).ready(function(){ $("p").mouseover(function () { $(this).css("color","red"); }); }); </script> <style> p { color:blue; width:200px; font-size:14px; } </style> </head> <body> <p> Just roll the mouse over me. </p> <p> Or me to see a color change. </p> </body> </html>
דוגמה 2
מסמן מילה שלחצתם עליה בפסקה.קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.5.js"></script> <script> $(document).ready(function(){ var words = $("p:first").text().split(" "); var text = words.join("</span> <span>"); $("p:first").html("<span>" + text + "</span>"); $("span").click(function () { $(this).css("background-color","yellow"); }); }); </script> <style> p { color:blue; font-weight:bold; cursor:pointer; } </style> </head> <body> <p> Once upon a time there was a man who lived in a pizza parlor. This man just loved pizza and ate it all the time. He went on to be the happiest man in the world. The end. </p> </body> </html>
האם מידע זה היה מועיל?
