Documentation

Student-friendly HTML, CSS, and JavaScript reference with examples

Sections


                                        querySelector()


                                        querySelectorAll()


                                        .textContent


                                        .value


                                        for...of (DOM)


                                        addEventListener()


                                        'click'


                                        'input'


                                        .style


                                        .classList.add()


                                        .classList.remove()


                                        .classList.toggle()


                                        createElement()


                                        .appendChild()


                                        .remove()


                                        .parentElement


                                        .getAttribute()


                                        data-*

Style Property

Changes CSS styles on an element using JavaScript.

const box = document.querySelector('.box');

box.style.backgroundColor = 'blue';
box.style.color = 'white';
box.style.fontSize = '20px';
box.style.padding = '10px';

CSS properties use camelCase: background-color becomes backgroundColor.
Values are strings and usually need units (‘20px’, not 20).