DEV Community

abbazs
abbazs

Posted on

5

How to conditionally set the style of an HTML element using Alpine.js

Creating a Conditional Style with Alpine.js

In this tutorial, we will explore how to conditionally set the style of an HTML element using Alpine.js. Our goal is to create an interactive color-changing application where a container contains multiple buttons representing different colors. When a button is clicked, the background color of an <h1> element will dynamically update based on the selected color.

Step 1: Set up the HTML structure and Alpine.js

First, let's set up the basic HTML structure and include the Alpine.js library. Create a new HTML file and add the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alpine.js Example</title>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@2.8.2/dist/alpine.js"></script>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .color-button {
        margin-right: 5px;
        margin-top: 5px;
      }
      .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 600px;
        border: 1px solid lightgray;
        padding: 20px;
        transition: box-shadow 0.3s;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
      }

      .container:hover {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      }
      .container-btn {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- HTML code goes here -->
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step 2: Define the data using x-data

Next, let's define the data using the x-data directive provided by Alpine.js. This directive allows us to create an instance of Alpine.js and define its data properties. Add the x-data attribute to the <div> element inside the container and initialize the color property as an empty string. Update the code as follows:

<div x-data="{ color: '' }" class="container">
  <!-- HTML code goes here -->
</div>
Enter fullscreen mode Exit fullscreen mode

Step 3: Bind the style using x-bind

To dynamically update the style of the <h1> element based on the selected color, we will use the x-bind directive. With x-bind, we can bind the value of an attribute to an expression. Add the x-bind directive to the <h1> element's style attribute and bind it to the color data property. Update the code as follows:

<h1 x-bind:style="'background-color: ' + color">HELLO WORLD</h1>
Enter fullscreen mode Exit fullscreen mode

Step 4: Handle button clicks using x-on

Now, let's handle the button clicks using the x-on directive provided by Alpine.js. This directive allows us to listen for events and execute expressions when those events occur. Add the x-on directive to each button and define the click event handler. Inside the event handler, update the color data property based on the selected color. Update the code as follows:

<div class="container-btn">
  <button x-on:click="color = 'red'" class="color-button">Red</button>
  <button x-on:click="color = 'white'" class="color-button">White</button>
  <button x-on:click="color = 'blue'" class="color-button">Blue</button>
  <button x-on:click="color = 'green'" class="color-button">Green</button>
  <button x-on:click="color = 'yellow'" class="color-button">Yellow</button>
</div>
Enter fullscreen mode Exit fullscreen mode

Step 5: Test the functionality

Now that you have completed the necessary steps, it's time to test the functionality of our color-changing application. Your finished html code shall look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alpine.js Example</title>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@2.8.2/dist/alpine.js"></script>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .color-button {
        margin-right: 5px;
        margin-top: 5px;
      }
      .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 600px;
        border: 1px solid lightgray;
        padding: 20px;
        transition: box-shadow 0.3s;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
      }

      .container:hover {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      }
      .container-btn {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div x-data="{ color: '' }" class="container">
      <h1 x-bind:style="'background-color: ' + color">HELLO WORLD</h1>
      <div class="container-btn">
        <button x-on:click="color = 'red'" class="color-button">Red</button>
        <button x-on:click="color = 'white'" class="color-button">White</button>
        <button x-on:click="color = 'blue'" class="color-button">Blue</button>
        <button x-on:click="color = 'green'" class="color-button">Green</button>
        <button x-on:click="color = 'yellow'" class="color-button">
          Yellow
        </button>
      </div>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Open the HTML file in a web browser and click on the buttons. The background color of the <h1> element should dynamically update based on the selected color.

You have successfully learned how to use Alpine.js to create a conditional style in web application. Understanding the concepts of x-data, data properties, and the x-bind and x-on directives is crucial for building interactive applications with Alpine.js. Feel free to customize the code and experiment with different styles and interactions to enhance your projects.

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (1)

Collapse
 
vq profile image
Bill •

Thanks

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay