Include a class in the html root tag

Question

Include a class in the html root tag

Is there a way to dynamically add a class to the root HTML tag when a specific button is clicked? Most resources I've found only show how to add classes to div elements with IDs.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="THIS IS WHERE I WANT THE CLASS TO BE ADDED" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

Begin presentation

I attempted to modify this code but have not been successful :

<script type="text/javascript">

    $("#addClass").click(function () {

      $('para1').addClass('presentation-started');

    });

    $("#removeClass").click(function () {

      $('#para1').removeClass('highlight');

    });

</script>

javascript jquery html css

Answer 1

Answer №1

If I understand correctly, you can utilize the following code:

$('html').addClass("someclass")

to include a class and

$('html').removeClass("someclass")

to eliminate it.

If there is a button with id="mybutton", then you would implement it like this:

$('#mybutton').click(function(){
    $('html').addClass("someclass")
});

If your code does not appear after the button element on the page, ensure to wrap your jQuery within a DOM ready handler (else the click handler will not be connected):

$(function(){
    $('#mybutton').click(function(){
        $('html').addClass("someclass")
    });
});

This serves as a convenient shortcut version of

$(document).ready(function(){...}):

Apply the Update using the provided example

Thus, based on the existing example, it would be:

<script type="text/javascript">
    $(function(){
        $("#addClass").click(function () {
            $('html').addClass('presentation-started');
        });

        $("#removeClass").click(function () {
            $('html').removeClass('highlight');
        });
    });
</script>

Answer 2

If I understand correctly, you can utilize the following code:

$('html').addClass("someclass")

to include a class and

$('html').removeClass("someclass")

to eliminate it.

If there is a button with id="mybutton", then you would implement it like this:

$('#mybutton').click(function(){
    $('html').addClass("someclass")
});

If your code does not appear after the button element on the page, ensure to wrap your jQuery within a DOM ready handler (else the click handler will not be connected):

$(function(){
    $('#mybutton').click(function(){
        $('html').addClass("someclass")
    });
});

This serves as a convenient shortcut version of

$(document).ready(function(){...}):

Apply the Update using the provided example

Thus, based on the existing example, it would be:

<script type="text/javascript">
    $(function(){
        $("#addClass").click(function () {
            $('html').addClass('presentation-started');
        });

        $("#removeClass").click(function () {
            $('html').removeClass('highlight');
        });
    });
</script>

Include a class in the html root tag

Answer №1

Similar questions

A Guide to Effectively Extracting Data from Second Level JSON Arrays with

Navigating Date Conversion within Component in Angular 2 Application

Define the post route methods effectively

Unable to show outcomes utilizing angular-ui autocomplete

Issues with Implementing Custom CSS Styles in ag-grid

Ways to close jQuery Tools Overlay with a click, regardless of its location

When utilizing the Map.get() method in typescript, it may return undefined, which I am effectively managing in my code

Troubleshooting a WordPress Blog Homepage CSS Dilemma

Why is my JavaScript code running but disappearing right away?

What is the best way to incorporate an image into an element to maximize the available space?

Select a date from the JQuery calendar, verify it against the database, and display any events scheduled for that date

Directive containing tracking code script

Positioning a sticky footer in a dual-column design

The browser is throwing errors because TypeScript is attempting to convert imports to requires during compilation

Guide to generating a div element with its contents using JSON

Every time I attempt to log into my app, I encounter a persistent 401 error message

Bootstrap 4 offers a convenient centered modal loading spinner feature

What methods can be used to choose specific rows while styling columns with CSS?

Disabling the default validation message in HTML form inputs

Clicking on a React component will result in highlighting