Dynamically change the following css in JavaScript or AngularJS

Question

How can I change this css style dynamically in JavaScript or in Angular?

 .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;
}

My question is different from:

Dynamically change a css class' properties with AngularJS

because I am using a ui-grid and these are classes that defaulted onto rows using the rowSelection gridOption. Instead of conditionally changing the class I need to change the class' style

Answer 1

In pure Javascript, you cannot edit the class directly. However, you can edit every element this class belongs to. This would look something like this

var myElements = document.querySelectorAll(".ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell");

for (var i = 0; i < myElements.length; i++) {
    myElements[i].style.opacity = 0; //making them invisible
    myElements[i].classList.add("ui-grid-cell-focus"); //adding a class
 }

You would probably in general be better off using ng-class though