6

Body Toggle | CSS-Tricks

 4 years ago
source link: https://css-tricks.com/body-toggle/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Comments

  1. qgustavor

    The onclick handler is from 1996 and is something I saw way many people using and I wish less people used, because it makes implementing Content-Security-Policy harder. For learning, small tests and demos those are fine as rarely someone will implement CSP on those cases.

    In the other hand classList is from 2010 and I hope this become a big thing. Well, for me it’s already a big thing: I never use classList anymore (even IE 10 supports it).

  2. john doe

    toggling class is so powerful but onclick attribute is not recommended. use tag and write in there or another .js file. like this:
    document.querySelector("button").addEventListener(e => e.currentTarget.classList.toggle("active"));
    css places in style tag or .css file and js places in script tag or .js file is major way

  3. Michael Cohen

    I use this one from time to time:

    <body class="no-js" onload="this.classList.replace('no-js','js')">
  4. Ricardo Carvalho

    I use it a lot.
    I would like to add something else:
    You can use the second parameter of the “toggle” method.
    Instead of switching the class “active” we could use the second parameter as a condition, if it is true it will add the “active” class and if not it will remove the class.
    https://jsfiddle.net/az2Ldpuw/ where you can check a use case where the toggle handles that only one element is active (it removes the active from the previous element that was active and adds the class to the clicked element)

Leave a Reply Cancel reply

Comment

Name

Email

Website

Save my name, email, and website in this browser for the next time I comment.

Get the CSS-Tricks newsletter

dark-mode-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200

A Complete Guide to Dark Mode on the Web

“Dark mode” is defined as a color scheme that uses light-colored text and other UI elements on a dark-colored background. Dark mode, dark theme, black mode, night mode… they all refer to and mean the same thing: a mostly-dark interface rather than a mostly-light interface.

July 1, 2020
commas.jpg?fit=1200%2C600&ssl=1&resize=350%2C200

How to Add Commas Between a List of Items Dynamically with CSS

Imagine you have a list of items. Say, fruit: Banana, Apple, Orange, Pear, Nectarine We could put those commas (,) in the HTML, but let’s look at how we could do that in CSS instead, giving us an extra level of control. We’ll make sure that last item doesn’t have…

January 12, 2021
javascript-v4.png?fit=1200%2C400&ssl=1&resize=350%2C200

A little bit of plain Javascript can do a lot

Julia Evans: I decided to implement almost all of the UI by just adding & removing CSS classes, and using CSS transitions if I want to animate a transition. An awful lot of the JavaScript on sites (that aren't otherwise entirely constructed from JavaScript) is click the thing, toggle the class —…

July 8, 2020
Jetpack Logo

The related posts above were algorithmically generated and displayed here without any load on our servers at all, thanks to Jetpack.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK