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

Possible duplicate of Dynamically change a css class' properties with AngularJS — notAChance
– notAChance, Commented Nov 24, 2015 at 16:33

cjds · Accepted Answer · 2015-11-24 16:37:32Z

0

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

answered Nov 24, 2015 at 16:37

cjds

8,47611 gold badges56 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically change the following css in JavaScript or AngularJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related