I'm building a website and I have an unsorted list with some list elements. When I click on some of these list items I want my <body>
’s id to change from id="index"
to id="collection"
.
What's the most efficient way to do that?
{% block %}
and override it when I click on the special list items?From a purely JavaScript persepctive, the simplest and best way of changing the body's ID is
document.body.id = "collection";
However, you may be better off using a class to avoid any potential conflict of your ID with any other ID in the page. Giving the body an ID doesn't seem terribly useful given that there is only one <body>
element in the page and it can be referenced via document.body
in JavaScript and body
in CSS.
If you want to change an element in the page without reloading the whole page then JavaScript is your only option. If the change is vital to the functionality of your page, you should also provide a non-JavaScript fallback.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With