Theory
Style is a runtime decision now
Three fest events just sold out. Their cards must go grey, immediately, in every open browser: but which 3 cards is only known at runtime, from the booking data.
Your BCA305-01 stylesheet cannot help: CSS files are written before anyone books anything. The page needs to style elements from script, based on live conditions.
jQuery's bridge between script and stylesheet is one method, css(), and you already know its grammar from text() and val().
Formula
Three call shapes
Get (from the FIRST match):
$("#garba").css("background-color")
Set one (on ALL matches):
$(".soldout").css("background-color", "grey")
Set many (object form):
$(".soldout").css({"background-color": "grey", "opacity": "0.6"})
Property names go quoted CSS-style ("font-size") or camelCase (fontSize); both address the same property.
Practical
Greying the sold-out cards (complete page)
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.card { background-color: white; padding: 8px; }
</style>
<script>
$(document).ready(function() {
$("#soldBtn").click(function() {
$(".soldout").css({ // object form: several at once
"background-color": "#dddddd",
"opacity": "0.6",
"font-style": "italic"
});
alert($("#garba").css("background-color")); // GET: first match
});
});
</script>
</head>
<body>
<button id="soldBtn">Mark sold out</button>
<ul>
<li id="garba" class="card soldout">Garba Night</li>
<li class="card">Coding Contest</li>
<li class="card soldout">Robo Race</li>
</ul>
</body>
</html>
This example runs in Gri-Learn on the web, where you can edit it and see the output.
Theory
What a get really returns
Run the listing's alert and it does not say "#dddddd". It says something like rgb(221, 221, 221).
A css() get returns the computed value: the browser's final, normalised answer after stylesheets, inline styles and defaults have all argued. Colours normalise to rgb() form, most lengths to px, whatever notation the stylesheet used.
So compare computed values against computed forms, not against the hex string you wrote: === "#dddddd" silently never matches, and that is a favourite spot-the-bug snippet.
Quiz
$(".soldout").css("background-color", "grey") runs with 3 matched cards. What happens?
- Only the first matched card turns grey
- All 3 matched cards turn grey: sets apply to every match
- Nothing: css() needs the object form for colours
- The stylesheet's .card rule blocks the change
Show the answer
All 3 matched cards turn grey: sets apply to every match
The unit's overload rule holds to the end: a SET applies to every element the selector matched, so all 3 sold-out cards grey together in one line. First-match-only behaviour (option A) belongs to GETS, and keeping that asymmetry straight is exactly what this question checks. Option C invents a restriction: the 2-argument form handles any single property. Option D has precedence backwards: css() writes INLINE styles, which outrank stylesheet rules, so the .card background loses this argument.
Think first
Inline styles win: blessing and curse
The stylesheet says .card { background-color: white } yet the css() set turns cards grey anyway. Before tapping: WHY does the script's style win, and what is the maintenance cost of styling this way everywhere?
Show the answer
css() writes into the element's style attribute: inline styles, which sit above stylesheet rules in the cascade (only !important outranks them). Blessing: your runtime decision reliably shows. Curse: design decisions leak out of the stylesheet into scattered script lines, and no stylesheet edit can override them later. The professional habit: define a .soldout-look class in CSS and toggle it with addClass/removeClass; keep css() for values genuinely computed at runtime (a width in px, a progress colour). Exams reward naming that trade-off.
Watch out
css() slips
Comparing gets to your notation: computed rgb() never equals your "#dddddd" string.
Unquoted CSS-style names in the object form: {font-size: "18px"} is a JS syntax error (the hyphen reads as minus); quote it or camelCase it: fontSize.
Forgetting units: css("width", 200) is forgiven by jQuery (px assumed) but css("width", "200") in some contexts and plain CSS is not: write "200px" and never wonder.
Theory
Unit 2 closes: the page is alive
Inventory of your jQuery kit: select anything (CSS selectors), react to anything (6 events), move things (3 effect families, chained, with callbacks), read and write contents (text/html/val/attr), grow and demolish structure (insert and remove families), and style at runtime (css). FestConnect's front end is fully dynamic. What it does NOT yet have is fresh DATA without a reload: Unit 3 gives the data a modern format (JSON), Unit 4 fetches it live (AJAX), and today's setters will be the landing pad.
Summary
Key takeaways
- css("prop") gets the computed value from the FIRST match; colours come back as rgb(), lengths as px.
- css("prop", "value") sets on ALL matches; css({...}) sets several properties at once.
- Property names: quoted CSS-style ("font-size") or camelCase (fontSize); object keys with hyphens MUST be quoted.
- Sets write inline styles, which override stylesheet rules.
- Professional habit: toggle classes for looks, reserve css() for runtime-computed values.
- Never compare a get against your own notation; compare against computed forms.
- Memory hook: one name asks, name-plus-value tells everyone, the object tells everything.