angularjs add css property to element without jquery

Question

In an angular directive I am making a clone of the element that I want which is

var node= element[0].cloneNode(true);

then I want to add css to this element. I know you can do this

$(node).css({width: width, left: left, height: height, top:'0px'});

but I know it is bad practice to use this in an angular directive. I have tried

angular.node.css({width: width, left: left, height: height, top:'0px'});

but this does not work. I have scoured the internet and have found nothing. All I get is jquery ways. Does anyone know how to add css to an element the angular way?

To any help, thanks!

Anthony Chu · Accepted Answer · 2014-04-14 20:46:40Z

7

Angular comes with jqLite, which is a trimmed down version of jQuery. There's nothing wrong with using it in a directive. clone() and css() are available in jqLite...

var node = element.clone()
                  .css({width: width, left: left, height: height, top:'0px'});

Working example: http://jsbin.com/yowubixa/1/edit?html,js,output

edited Apr 14, 2014 at 20:46

answered Apr 14, 2014 at 20:32

Anthony Chu

37.6k10 gold badges85 silver badges72 bronze badges

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

5 Comments

user3339134 Over a year ago

Thanks @anthony, I thought this would work, but I still get a 'Uncaught TypeError: Cannot read property 'css' of undefined' error. Do you know what this could mean?

Anthony Chu Over a year ago

Can you post your code, maybe in a fiddle? I just tried this in the link function of a directive and it worked.

Anthony Chu Over a year ago

@user3339134 Updated answer with the example.

user3339134 Over a year ago

that is weird, it works on jsbin, but I am still getting 'css' of undefined. Weird. Thanks for your input!

user3339134 Over a year ago

What you said seems to work. Kind of. The reasons it might not work, may be on my part. In my directive when I print console.log(element[0].parentElement) I get the dom, but what I want is the array like thing that has children and offset. How do I print that info of a parent. By the way, since I think this works I am going to set this as the answer. Thanks!

phylax · Accepted Answer · 2014-04-14 20:28:10Z

0

ngStyle directive takes an "Expression which evals to an object whose keys are CSS style names and values are corresponding values for those CSS keys."

answered Apr 14, 2014 at 20:28

phylax

2,09615 silver badges16 bronze badges

1 Comment

user3339134 Over a year ago

Thanks for responding @phylax. But, I am doing all the values in javascript/directive so I can't use ngStyle

user3339134 · Accepted Answer · 2014-04-15 20:27:13Z

0

To those who may find this later, I found the solution to my problem. The reason why I could not do node.css() was because node was a dom element. This was due to my copy. To keep the javascript object you have to do

angular.element(element[0]).clone()

to properly clone it. this then allows me to do node.css(). You can do other things besides .css. You can look at the following here.

http://docs.angularjs.org/api/ng/function/angular.element

Hope this helps!

answered Apr 15, 2014 at 20:27

user3339134

651 gold badge2 silver badges4 bronze badges

Comments

Rizwan · Accepted Answer · 2017-12-10 18:46:27Z

0

open ....component.js

angular.element(idName).css("background", "#000");

i.e hello is idName in div.

<div id="hello"></div>

answered Dec 10, 2017 at 18:46

Rizwan

4,5232 gold badges31 silver badges23 bronze badges

Collectives™ on Stack Overflow

angularjs add css property to element without jquery

4 Answers 4

5 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related