Changing HTML Class in Svelte Components with the Class Directive

John Au-Yeung
Apr 29, 2020 · 3 min read
Photo by NeONBRAND on Unsplash

Svelte is an up and coming front end framework for developing front end web apps.

It’s simple to use and lets us create results fast.

In this article, we’ll look at how to change class names dynamically with the Svelte class directive.

Class Directive

We can use the class directive with an expression to return the class to display based on the condition.

Also, we can add class names as modifiers and the condition to display it as the value as pass in.

For instance, we can write the following code to toggle a class:

App.svelte :

<script>
let enableFoo;
</script>
<style>
.foo {
color: red;
}
</style>
<button
on:click="{() => enableFoo = !enableFoo}"
>
Toggle Class
</button>
<p class="{enableFoo ? 'foo': ''}">foo</p>

In the code above, we have class=”{enableFoo ? ‘foo’: ‘’}” to toggle the foo class on when the enableFoo variable is true since we return 'foo' then. Otherwise, we have no class apply to the p element.

The class directive conditionally applies the foo class to the p element since we added the class directive to that element.

The button toggles the enableFoo on and off, which is used to return 'foo' when enableFoo is true . Otherwise, we return an empty string, which means no class.

The foo class sets the color to red. So the text in the p tag will be toggle between red and black.

We can also write the code to do the same thing as follows:

App.svelte :

<script>
let enableFoo;
</script>
<style>
.foo {
color: red;
}
</style>
<button
on:click="{() => enableFoo = !enableFoo}"
>
Toggle Class
</button>
<p class:foo="{enableFoo}">foo</p>

We changed:

class="{enableFoo ? 'foo': ''}"

to:

class:foo="{enableFoo}

foo is the class name, which the modifier for the class directive.

If our class is the same as our variable name for toggling on a class on and off, then we can shrink the class directive code with the shorthand.

For instance, instead of writing:

<script>
let foo;
</script>
<style>
.foo {
color: red;
}
</style>
<button
on:click="{() => foo = !foo}"
>
Toggle Class
</button>
<p class:foo="{foo}">foo</p>

We can write:

<script>
let foo;
</script>
<style>
.foo {
color: red;
}
</style>
<button
on:click="{() => foo = !foo}"
>
Toggle Class
</button>
<p class:foo>foo</p>

They both toggle the foo class. class:foo=”{foo}” is the same as class:foo .

Photo by Danielle Cerullo on Unsplash

Conclusion

The class directive lets us conditionally apply a class to an element. We can do that either by passing in an expression to conditionally return a class name to apply.

Or we can add the class name as the modifier to the class directive and then pass in the condition to add the class as the value we pass into the directive.

The Startup

Get smarter at building your thing. Join The Startup’s +786K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

John Au-Yeung

Written by

Web developer. Subscribe to my email list now at https://thewebdev.info/subscribe/. Email me at hohanga@gmail.com

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +786K followers.

John Au-Yeung

Written by

Web developer. Subscribe to my email list now at https://thewebdev.info/subscribe/. Email me at hohanga@gmail.com

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +786K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store