Update the CSS dynamically using JavaScript or AngularJS

Question

Update the CSS dynamically using JavaScript or AngularJS

Is there a way to dynamically modify this CSS style using JavaScript or in an Angular framework?

.ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell{
        background-color: transparent;
        color: #0a0;
  }
  .ui-grid-cell-focus {
    outline: 0;
    background-color: transparent;
}

I have a specific question different from:

Dynamically change a css class' properties with AngularJS

My query pertains to using a ui-grid and default classes applied to rows through the rowSelection gridOption. Rather than conditionally changing the class, I am looking to alter the class's style.

javascript html css angularjs

Answer 1

Answer №1

In vanilla Javascript, direct manipulation of a class is not feasible. Nevertheless, you have the ability to modify each element associated with that particular class. This can be achieved through the following code snippet:

var targetElements = document.querySelectorAll(".custom-class-name > [target-element] > .specific-cell");

for (var j = 0; j < targetElements.length; j++) {
    targetElements[j].style.visibility = "hidden"; // making elements invisible
    targetElements[j].classList.add("active-cell"); // appending a new class
}

It is advisable to consider using ng-class for better implementation.

Answer 2

In vanilla Javascript, direct manipulation of a class is not feasible. Nevertheless, you have the ability to modify each element associated with that particular class. This can be achieved through the following code snippet:

var targetElements = document.querySelectorAll(".custom-class-name > [target-element] > .specific-cell");

for (var j = 0; j < targetElements.length; j++) {
    targetElements[j].style.visibility = "hidden"; // making elements invisible
    targetElements[j].classList.add("active-cell"); // appending a new class
}

It is advisable to consider using ng-class for better implementation.

Update the CSS dynamically using JavaScript or AngularJS

Answer №1

Similar questions

How to simulate a particular class from a node package using Jest mocks

Encountering the error "ReferenceError: Cannot access 'data' before initialization" during deployment on Vercel

Where can the Path be found for Json inside App Phonegap?

Angular's minimum date validation is not accurate for dates prior to the year 1901

Incorporating a picture backdrop into a button element in a React Typescript component

Error message: Could not locate the class 'NunoMaduroCollisionAdaptersLaravelCollisionServiceProvider'

Capture Video on iOS devices using the MediaRecorder API and display it using HTML5 Video Player

What steps do I need to take in order to modify information within a table using Symfony?

Can someone please explain how to execute an "except" filter in Angular?

Unable to modify the bar's color using the .css document

Arranging elements within an outer array by the contents of their inner arrays

Getting data from a PHP request using AngularJS can be achieved by creating an HTTP request in

jQuery loops through form fields and sets them as disabled

HTML / CSS / JavaScript Integrated Development Environment with Real-time Preview Window

Ensuring complete height and width with no scrollbar in a Material UI React application

Each time the page is reloaded, an error message pops up: "TypeError: Cannot access attributes of an undefined object (referencing 'name')."

Is it possible to duplicate a response before making changes to its contents?

What is the most effective way to choose and give focus to an input using JavaScript or jQuery?

Confirm the email address using the autocomplete feature in the field

Issues with AngularJS Opening the Datepicker upon Click