How to conditionally set the style of an HTML element using Alpine.js
Tags: alpinejs, style, tutorial, condition
Published: 2023-06-25 05:33:51

## 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](https://alpinejs.dev/). 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:

```html
<!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>
```

### 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:

```html
<div x-data="{ color: '' }" class="container">
  <!-- HTML code goes here -->
</div>
```

### 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:

```html
<h1 x-bind:style="'background-color: ' + color">HELLO WORLD</h1>
```

### 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:

```html
<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>
```

### 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:

```html
<!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>
```

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.