return elements that match specified CSS selector(s)

Is it possible to change the style of elements returned by querySelectorAll()?

Answers:

  • Yes, it is possible to change the style of elements returned by querySelectorAll() in JavaScript. The querySelectorAll() method returns a NodeList of elements that match the specified CSS selector(s). You can then iterate over this NodeList and modify the style of each element individually.

    Here's a step-by-step example of how to do this:

    1. Use querySelectorAll() to select the desired elements.
    2. Iterate over the returned NodeList.
    3. Change the style of each element.

    Here’s a simple example:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Styles</title>
</head>
<body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    
    <script>
        // Select all elements with the class 'box'
        const boxes = document.querySelectorAll('.box');

        // Iterate over each selected element
        boxes.forEach(box => {
            // Change the style of each element
            box.style.backgroundColor = 'lightblue';
            box.style.color = 'white';
            box.style.padding = '10px';
            box.style.margin = '5px';
            box.style.border = '1px solid blue';
        });
    </script>
</body>
</html>

    In this example, we select all <div> elements with the class "box" and then change their background color, text color, padding, margin, and border style. You can adjust the styles according to your requirements.

    Important Notes:

    • The styles can be modified using JavaScript properties corresponding to CSS properties, where hyphens are replaced with camelCase (e.g., background-color becomes backgroundColor).
    • You can also apply classes or use inline styles directly, depending on your needs.

Related Questions: