WDD13 - JavaScript: changing page layout
- I can write a function that changes several CSS style properties of an element at once.
- I can convert a hyphenated CSS property name into its correct JavaScript camelCase form.
- I can write a set of functions (such as changeLeft, changeRight and changeBack) that rearrange a page's layout and can be reversed.
- I can write a single function containing more than one element.style.X assignment.
- I can correctly convert CSS properties like background-color and margin-left into JavaScript property names.
- I can identify and fix a broken style property name in JavaScript code.
WDD13 generalises WDD12's single-property style changes (display) to several properties at once.
Key vocabulary
Combining several style changes in one function
One function, several properties
WDD12 used element.style.display to show and hide a single element by changing one property. The same element.style.X pattern works for any CSS property, and a single function is not limited to changing only one of them. A function that genuinely rearranges a page's layout - moving an element, resizing it, and recolouring it all at once - typically needs several element.style.X assignments inside the same function, one line per property.
function changeLeft() {
var box = document.getElementById('box');
box.style.float = 'left';
box.style.width = '120px';
box.style.background = '#E1F5EE';
}camelCase: JavaScript's naming rule for hyphenated CSS properties
Many CSS properties are two or more words joined by a hyphen: background-color, margin-left, font-size. JavaScript identifiers cannot contain a hyphen - a hyphen is the subtraction operator - so every hyphenated CSS property becomes a single JavaScript word in camelCase: the hyphen is removed, and the letter that followed it becomes a capital. background-color becomes backgroundColor; margin-left becomes marginLeft; font-size becomes fontSize. Single-word CSS properties such as width, height, float or color need no conversion at all, since there is no hyphen to remove.
→ backgroundColor
→ marginLeft
→ fontSize
→ width (no change - single word)
setting the background colour
Worked examples
/* CSS */ /* JavaScript */
background-color → backgroundColor
margin-left → marginLeft
font-size → fontSizefunction changeLeft() {
var box = document.getElementById('box');
box.style.float = 'left';
box.style.width = '120px';
}
function changeRight() {
var box = document.getElementById('box');
box.style.float = 'right';
box.style.width = '200px';
}
function changeBack() {
var box = document.getElementById('box');
box.style.float = 'none';
box.style.width = '300px';
}JavaScript reads this as background minus color - an invalid, meaningless expression. This causes a JavaScript error, and nothing on the page changes.
A single valid JavaScript property name. The background colour changes exactly as intended.
Write the correct JavaScript property name for the CSS property border-color.
Remove the hyphen between "border" and "color", and capitalise the letter that followed it: c → C.
border-color becomes borderColor.
Practical: changeLeft/changeRight/changeBack, WebStorm
Download the starter file below - three buttons with empty onclick attributes, and a box to rearrange.
Download WDD13_starter.html- Add a <script> block and write changeLeft(), changeRight() and changeBack(), each combining at least two element.style.X assignments.
- Wire each button's onclick attribute to the matching function.
- Double-check every property name is correctly converted to camelCase.
- Save, open in a browser, and click all three buttons to check the box moves, resizes, and can always be restored to its original layout.
- Writing element.style.background-color instead of backgroundColor. JavaScript reads the hyphen as subtraction, causing an error rather than setting the colour.
- Changing only one property when the intended layout change genuinely needs several. Floating a box left without also giving it a smaller width, for example, may not produce the rearrangement actually intended.
- Forgetting to write a changeBack()-style function. Without one, there is no way to return the page to its original layout once changeLeft() or changeRight() has run.
- Assuming every CSS property needs camelCase conversion. Single-word properties such as width, height, float and color are already valid JavaScript identifiers and need no change.
If a question shows JavaScript code setting a style property and asks whether it will work, check first for a hyphen in the property name - a hyphen there is invalid JavaScript and the correct camelCase form should be given instead. Remember that a single function is allowed to contain more than one element.style.X line; combining several is exactly how a genuine layout change is built.
Task Set A - Core questions
function changeRight() {
var box = document.getElementById('box');
box.style.float = 'right';
box.style.background-color = '#E1F5EE';
}function changeRight() {
var box = document.getElementById('box');
box.style.float = 'right';
box.style.backgroundColor = '#E1F5EE';
}background-color is not valid JavaScript - the hyphen is read as subtraction. Converting it to camelCase, backgroundColor, fixes the error.
Task Set B - Extension
- In your file from the main practical, add a fourth button and a function such as changeHighlight().
- Inside it, set at least three element.style.X properties together - for example float, width and a border colour, all in the same function.
- Make sure every property name is correctly converted to camelCase where needed.
- Save, open in a browser, and check the new button applies all three changes at once, and that changeBack() still correctly restores the original layout afterwards.
function changeHighlight() {
var box = document.getElementById('box');
box.style.float = 'left';
box.style.width = '150px';
box.style.borderColor = '#D85A30';
}Compare your own file against this rather than copying it - the exact properties and values do not matter, but at least three element.style.X lines should be present in a single function, and changeBack() should still work afterwards.
File this in OneNote under:
Higher Computing Science > Web Design & Development > WDD13
Timing: content is scoped for a single period and lands on one (Tue 8 Dec 2026, per WDD.md §2a/§4 table) - an "OK" match, no compression or extra-time adjustment needed. Suggested pace: 6 min warm up, 12 min combining-properties + camelCase notes + Example 1, 12 min changeLeft/Right/Back notes + context box + Example 2 (including the live demo), 8 min Example 3 + common mistakes, remaining time on Task Set A, then Task Set B and the WebStorm practical.
Scope control: deliberately does not introduce arrays, loops, or storing multiple elements' worth of state - each function operates on one fixed element id, matching Chris's own L13 changeLeft()/changeRight()/changeBack() pattern and the WDD scope note excluding loops and arrays entirely.
The camelCase conversion is the highest-value fact in this lesson, matching the role played by margin collapse (WDD8), percentage height (WDD9) and the empty-string starting state (WDD12) - it is a small, easy-to-miss syntax rule with a very specific, testable failure mode (background-color parsed as subtraction). A1-A4/A8/A9/B2 all test it from different angles.
Starter file provided (WDD13_starter.html) rather than a from-scratch build, restoring variation after WDD11 and WDD12 were both built from scratch in a row.