JavaScript HTML, CSS and Attributes Practice Questions with Solutions

By /

Introductions

JavaScript can dynamically change HTML content, CSS styles, classes, and HTML attributes after a webpage loads. These features are essential for creating interactive websites. In this chapter, you will practice changing headings, paragraphs, images, links, classes, styles, and attributes using simple JavaScript examples. JavaScript HTML, CSS and Attributes Practice Questions with Solutions help to understand the concepts.

Question 1: Change HTML Text with JavaScript

Problem

Create a heading and use JavaScript to change its text when the page loads.

Solution

<h1 id="heading">Old Heading</h1>

<script>
    const heading = document.getElementById("heading");

    heading.textContent = "Welcome to My Website";
</script>

Output

Welcome to My Website

Step-by-step Explanation

  1. The <h1> has the ID heading.
  2. getElementById() selects the heading.
  3. The selected element is stored in heading.
  4. textContent changes the existing text.
  5. The browser displays the new heading.

Question 2: Change the HTML Content Using innerHTML

Problem

Create an empty <div> and use JavaScript to add a heading and paragraph inside it.

Solution

<div id="container"></div>

<script>
    const container = document.getElementById("container");

    container.innerHTML = `
        <h2>JavaScript DOM</h2>
        <p>JavaScript can change HTML content.</p>
    `;
</script>

Output

JavaScript DOM
JavaScript can change HTML content.

Step-by-step Explanation

  1. The <div> starts empty.
  2. JavaScript selects the <div>.
  3. innerHTML allows HTML markup to be inserted.
  4. A heading and paragraph are added.
  5. The browser renders the new HTML.

Question 3: Change CSS Properties Using JavaScript

Problem

Create a paragraph and use JavaScript to change its color, font size, and background color.

Solution

<p id="message">JavaScript can change CSS.</p>

<script>
    const message = document.getElementById("message");

    message.style.color = "blue";
    message.style.fontSize = "24px";
    message.style.backgroundColor = "yellow";
</script>

Output

The paragraph appears with:

  • Blue text
  • 24px font size
  • Yellow background

Step-by-step Explanation

  1. JavaScript selects the paragraph.
  2. style.color changes the text color.
  3. style.fontSize changes the font size.
  4. style.backgroundColor changes the background.
  5. JavaScript uses CSS property names in camelCase.

For example:

background-color

becomes:

backgroundColor

Question 4: Add a CSS Class Using classList.add()

Problem

Create a paragraph and add a CSS class to it using JavaScript.

Solution

<style>
    .highlight {
        color: white;
        background-color: black;
        padding: 10px;
    }
</style>

<p id="message">Important Message</p>

<script>
    const message = document.getElementById("message");

    message.classList.add("highlight");
</script>

Output

The paragraph receives the highlight styling.

Step-by-step Explanation

  1. The .highlight CSS class defines several styles.
  2. JavaScript selects the paragraph.
  3. classList.add("highlight") adds the class.
  4. The browser immediately applies the CSS rules.
  5. JavaScript does not need to write every CSS property separately.

Question 5: Remove a CSS Class Using classList.remove()

Problem

Create a paragraph with a CSS class and remove that class using JavaScript.

Solution

<style>
    .highlight {
        background-color: yellow;
        color: red;
    }
</style>

<p id="message" class="highlight">Highlighted Text</p>

<script>
    const message = document.getElementById("message");

    message.classList.remove("highlight");
</script>

Output

The yellow background and red text are removed.

Step-by-step Explanation

  1. The paragraph initially has the highlight class.
  2. JavaScript selects the paragraph.
  3. classList.remove() removes the class.
  4. The styles defined by .highlight are no longer applied.

Question 6: Toggle a CSS Class

Problem

Create a button and paragraph. When the button is clicked, toggle a CSS class on the paragraph.

Solution

<style>
    .active {
        color: white;
        background-color: green;
        padding: 10px;
    }
</style>

<p id="message">Click the button to change my style.</p>

<button id="toggleButton">Toggle Style</button>

<script>
    const message = document.getElementById("message");
    const button = document.getElementById("toggleButton");

    button.addEventListener("click", function() {
        message.classList.toggle("active");
    });
</script>

Output

Before clicking:

Click the button to change my style.
[Toggle Style]

After clicking, the paragraph receives the active class.

Clicking again removes the class.

Step-by-step Explanation

  1. The paragraph starts without the active class.
  2. The button listens for a click.
  3. classList.toggle("active") checks the class.
  4. If the class does not exist, it adds it.
  5. If the class already exists, it removes it.
  6. This makes toggle() useful for interactive styles.

Question 7: Change an Image Attribute

Problem

Create an image and use JavaScript to change its src and alt attributes.

Solution

<img id="productImage" src="old-image.jpg" alt="Old Product">

<script>
    const image = document.getElementById("productImage");

    image.setAttribute("src", "new-image.jpg");
    image.setAttribute("alt", "New Product");
</script>

Output

The image now uses:

src = new-image.jpg
alt = New Product

Step-by-step Explanation

  1. JavaScript selects the image.
  2. setAttribute() changes an HTML attribute.
  3. The first call changes src.
  4. The second call changes alt.
  5. The browser uses the updated attribute values.

Question 8: Change a Link Using JavaScript

Problem

Create a link and use JavaScript to change its destination and displayed text.

Solution

<a id="websiteLink" href="https://example.com">
    Visit Website
</a>

<script>
    const link = document.getElementById("websiteLink");

    link.href = "https://www.google.com";
    link.textContent = "Visit Google";
</script>

Output

Visit Google

The link now points to the new destination.

Step-by-step Explanation

  1. The <a> element has an ID.
  2. JavaScript selects the link.
  3. link.href changes the destination.
  4. textContent changes the visible link text.
  5. Both HTML properties are updated dynamically.

Question 9: Change Multiple CSS Properties with a CSS Class

Problem

Instead of changing multiple styles individually, create a CSS class and apply it to a box using JavaScript.

Solution

<style>
    .card-style {
        background-color: lightblue;
        color: black;
        padding: 20px;
        border: 2px solid black;
        border-radius: 10px;
    }
</style>

<div id="card">
    JavaScript Card
</div>

<script>
    const card = document.getElementById("card");

    card.classList.add("card-style");
</script>

Output

The <div> appears as a styled card.

Step-by-step Explanation

  1. .card-style contains all required CSS.
  2. JavaScript selects the <div>.
  3. classList.add() applies the CSS class.
  4. All styles are applied together.
  5. This approach keeps JavaScript cleaner when many styles need to change.

Question 10: Change HTML, CSS and Attributes Together

Problem

Create a button and a profile card. When the button is clicked:

  • Change the person’s name.
  • Change the card’s CSS class.
  • Change the image alt attribute.

Solution

<style>
    .normal-card {
        padding: 15px;
        border: 1px solid black;
    }

    .active-card {
        padding: 15px;
        border: 3px solid green;
        background-color: lightgreen;
    }
</style>

<div id="card" class="normal-card">

    <h2 id="name">Rahul</h2>

    <img
        id="profileImage"
        src="profile.jpg"
        alt="Rahul Profile"
        width="150"
    >

</div>

<button id="updateButton">Update Profile</button>

<script>
    const card = document.getElementById("card");
    const name = document.getElementById("name");
    const image = document.getElementById("profileImage");
    const button = document.getElementById("updateButton");

    button.addEventListener("click", function() {

        name.textContent = "Aman";

        card.classList.remove("normal-card");
        card.classList.add("active-card");

        image.setAttribute("alt", "Aman Profile");
    });
</script>

Output

Before clicking:

Rahul
[Profile Image]
[Update Profile]

After clicking:

Aman
[Updated Profile Image]
[Update Profile]

The card also receives the active-card styling.

Step-by-step Explanation

  1. JavaScript selects the card.
  2. JavaScript selects the name heading.
  3. JavaScript selects the image.
  4. JavaScript selects the button.
  5. A click event is attached to the button.
  6. textContent changes "Rahul" to "Aman".
  7. classList.remove() removes the old card style.
  8. classList.add() applies the new card style.
  9. setAttribute() changes the image’s alt attribute.
  10. All three parts of the webpage are updated without reloading the page.

Key Takeaways

  • JavaScript can dynamically modify HTML content.
  • textContent changes text inside an element.
  • innerHTML can insert HTML markup.
  • The style property can directly modify CSS.
  • classList.add() adds a CSS class.
  • classList.remove() removes a CSS class.
  • classList.toggle() adds or removes a class depending on its current state.
  • setAttribute() changes HTML attributes.
  • getAttribute() can read an attribute.
  • Properties such as src, href, and alt can also be changed directly.
  • JavaScript can combine HTML, CSS, and attribute changes in one interaction.
  • These techniques are the foundation of interactive webpages.

FAQs

1. How can JavaScript change HTML text?

Use textContent.

const heading = document.getElementById("heading");

heading.textContent = "New Heading";

2. What is the difference between textContent and innerHTML?

textContent treats the assigned value as text:

element.textContent = "<strong>Hello</strong>";

innerHTML interprets the value as HTML:

element.innerHTML = "<strong>Hello</strong>";

3. How can JavaScript change CSS?

You can directly change styles:

element.style.color = "red";
element.style.fontSize = "20px";

For multiple styles, using a CSS class is often cleaner.

4. How do I add a CSS class using JavaScript?

Use classList.add().

element.classList.add("active");

5. How do I remove a CSS class?

Use classList.remove().

element.classList.remove("active");

6. How do I toggle a CSS class?

Use classList.toggle().

element.classList.toggle("active");

It adds the class if it is missing and removes it if it already exists.

7. How can JavaScript change an HTML attribute?

Use setAttribute().

element.setAttribute("title", "New Title");

You can also directly modify common properties:

image.src = "new-image.jpg";
link.href = "https://example.com";

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top