Question

24

Changing CSS dynamically AngularJS

rated 0 times [ 25] [ 1] / answers: 1 / hits: 9951 / 10 Years ago, fri, november 7, 2014, 12:00:00

I want to change the style of any class inside otc-dynamically ,one time and dynamically. Since the CSS styles is coming from Web Api. Is there's a way javascript can do that ?

Thanks for those who will help

This my HTML:

 <accordion close-others=false>

   <div>

      <accordion-group class=div-recipe-header>

           <accordion-heading></accordion-heading>

              <my-directive></my-directive>

                 <div otc-dynamic>

                     <div class=div-recipe-name></div>

                      <div class=div-recipe-cost></div>

                </div>   



      </accordion-group>

    </div>

  </accordion>

Sample Data from Json ( I put the data in variable usercss)

usercss = '.div-recipe-cost{position: absolute;top: 0;left: calc(100% - 85px);bottom: 0;overflow:padding-top: 5px;padding-bottom: 5px;padding-right: 0;font-family: 'Segoe UI', 'Open Sans', 'Roboto', 'Lucida Grande', 'Helvetica', 'Arial', 'sans-serif';font-size: small;background: none;overflow: hidden;font-weight: bold;} .div-recipe-name{position: absolute;top: 0;left: 12px;bottom: 0;width: calc(100% - 0px);padding-top: 5px;padding-bottom: 5px;padding-right: 0;height: calc(100% - 0px);font-family: 'Segoe UI', 'Open Sans', 'Roboto', 'Lucida Grande', 'Helvetica', 'Arial', 'sans-serif';font-size: large;background: none;overflow: hidden;} '

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kristopherw

Add To Favorites

Follow

Total Points: 173

Total Questions: 107

Total Answers: 98

Location: Lesotho

Member since Wed, Jun 2, 2021

3 Years ago

answered 10 Years ago vanessag · Accepted Answer

Look like you are doing reverse ?

You assigned class to elements. and then download the style of each class later from JSON.

You can just embed those style to you document

usercss = '.div-recipe-cost{position: ab........'; // Your css



var css = document.createElement(style);

css.type = text/css;

css.innerHTML = usercss;

document.body.appendChild(css);