Add CSS styling to a particular div element when a button is clicked

Question

Add CSS styling to a particular div element when a button is clicked

I have been working on a new feature that involves highlighting a div in a specific color and changing the mouse pointer to a hand cursor. I successfully achieved this by adding a CSS class:

.changePointer:hover {
    cursor: pointer;
    background-color: rgb(231, 222, 222);
}

The functionality works as expected when hovering over the div. However, my goal is to trigger this effect only upon clicking a button. I am using Angular 7 for this project. I attempted to utilize

[ngClass]="{'someClass': highlightText}"

, updating the highlightText boolean to true upon button click, but unfortunately, it did not produce the desired outcome. Does anyone have any suggestions?

css angular

Answer 1

Answer №1

Utilize the class in the following manner, with active being the class name used.

<div [class.active]="condition"></div>

In your css, include :hover for the active class,

.active:hover {
  background-color: red;
  cursor: pointer;
}

View Demo

Answer 2

Utilize the class in the following manner, with active being the class name used.

<div [class.active]="condition"></div>

In your css, include :hover for the active class,

.active:hover {
  background-color: red;
  cursor: pointer;
}

View Demo

Answer 3

Answer №2

Make use of Renderer2 for element's css manipulation.

Sample HTML:

<div class="container">
    <div class="container__item" *ngFor="let div of [1,2,3]" (click)="onClick($event)">
    </div>
</div>

Component Logic:

  import { Component, Renderer2 } from '@angular/core';


  constructor(private rndr2: Renderer2) {}

  onClick(ev) {
    this.rndr2.addClass(ev.target, 'changePointer')
  }

Check out the DEMO: https://stackblitz.com/edit/angular-gaa6zi?file=src/app/app.component.ts

Answer 4

Make use of Renderer2 for element's css manipulation.

Sample HTML:

<div class="container">
    <div class="container__item" *ngFor="let div of [1,2,3]" (click)="onClick($event)">
    </div>
</div>

Component Logic:

  import { Component, Renderer2 } from '@angular/core';


  constructor(private rndr2: Renderer2) {}

  onClick(ev) {
    this.rndr2.addClass(ev.target, 'changePointer')
  }

Check out the DEMO: https://stackblitz.com/edit/angular-gaa6zi?file=src/app/app.component.ts

Answer 5

Answer №3

If you're looking to achieve this functionality in JavaScript, utilizing an event listener is the way to go.

button.addEventListener('click', (e) => {
    div.style.backgroundColor = 'rgb(231, 222, 222)';
    div.style.cursor = 'pointer';
});

Answer 6

If you're looking to achieve this functionality in JavaScript, utilizing an event listener is the way to go.

button.addEventListener('click', (e) => {
    div.style.backgroundColor = 'rgb(231, 222, 222)';
    div.style.cursor = 'pointer';
});

Answer 7

Answer №4

If you want to change the cursor style, simply add the class .changePointer to the element

function toggleTargets(){
  //Use dataset attribute for selecting targets
  let targets = document.querySelectorAll('[data-type=A]')
  targets.forEach(elem=>elem.classList.toggle('changePointer'))
}

.changePointer:hover {
    cursor: pointer;
    background-color: rgb(231, 222, 222);
}

div{border:1px solid black; margin:5px;}

<button type="button" onclick="toggleTargets()">CLICK</button>

<div data-type=A>A</div>
<div data-type=B>B</div>
<div data-type=C>C</div>
<div data-type=A>D</div>
<div data-type=B>E</div>
<div data-type=C>F</div>
<div data-type=A>G</div>
<div data-type=B>H</div>
<div data-type=C>I</div>

Answer 8

If you want to change the cursor style, simply add the class .changePointer to the element

function toggleTargets(){
  //Use dataset attribute for selecting targets
  let targets = document.querySelectorAll('[data-type=A]')
  targets.forEach(elem=>elem.classList.toggle('changePointer'))
}

.changePointer:hover {
    cursor: pointer;
    background-color: rgb(231, 222, 222);
}

div{border:1px solid black; margin:5px;}

<button type="button" onclick="toggleTargets()">CLICK</button>

<div data-type=A>A</div>
<div data-type=B>B</div>
<div data-type=C>C</div>
<div data-type=A>D</div>
<div data-type=B>E</div>
<div data-type=C>F</div>
<div data-type=A>G</div>
<div data-type=B>H</div>
<div data-type=C>I</div>

Add CSS styling to a particular div element when a button is clicked

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Stylishly Select with Bootstrap 4

The function inside the subscribe block is failing to execute because the navigate function is not functioning properly

The border-color feature in Bootstrap 5 does not function properly when applying responsive border-start/end/top/bottom styles

Validating Inputs with an Array of Values in my Angular 2 Application

The image is not appearing on the webpage even though the online URLs are functioning correctly

Issue with the code flow causing nested function calls to not work as expected

Choosing nested elements using CSS

Duplicate routing configuration causing ngOnInit to be triggered twice

run a function once ngFor has completed rendering the data

Ways to position an image in the middle of a Div

Angular HTTP requests are failing to function properly, although they are successful when made through Postman

What is the best way to enhance the appearance of a list item that includes a visited hyperlink?

Trouble Viewing Fonts on Mobile Devices like iPhones

Develop an engaging billboard carousel using jQuery

Ionic 5 Error: Unable to access 'subscribe' property of undefined object

What is the best way to gradually transform a continuously shifting text color into a single, consistent hue?

Struggling with the functionality of Angular Material Layout Directives

Tips on maintaining and hiding the vertical scrollbar when a popup is open, alongside the navigation bar positioned at the top of the page

Implementation of Asp.Net core identity combined with Angular 2

The div inside an iframe is not displaying the desired background color as intended from the parent page