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

Is there a way to switch out the navigation icons on the react-material-ui datepicker?

What is the best way to implement a hover delay for an element in Angular?

"When setting up a window.EventListener, the Div element fails to be hidden when setting its display property to 'none

What is the best way to ensure that all the divs within a grid maintain equal size even as the grid layout changes?

Attempting to launch an Angular web application on Azure's Linux-based Web App service

Can a button be connected to both navigate to another webpage and trigger a modal to appear on it simultaneously?

'Dynamic' styling in Next.js using conditional CSS

The Nx end-to-end Cypress runner ensures that values from the cypress.env.json file do not overwrite the same entries in the cypress.json environment object

Modifications made to Angular 7 templates are not appearing in MVC 5

Generating a PDF file from an HTML and CSS page can be done without relying on APIs or libraries, by leveraging the

You need to click the form submit image twice in order to make it work

Observable - initiating conditional emission

How can I utilize a variable as the value for ngClass in Angular 2?

Analyzing feedback according to the ResponseHeaders

Is there a way to implement a css/javascript property specifically for a div that is selected in the url?

Switching from portrait to landscape view on a mobile website

Customize the appearance of disabled dates in the eonasdan-datetimepicker styling

Issues with CSS rendering have been observed following an ajax update when using the <ui:repeat> tag

Streamlined Boilerplate to Kickstart Your Project

Personalize your Angular Material experience