Overriding the inline CSS with jQuery

Question

HTML:

<div id="myDiv">

//Some content

</div>

I want to set the below css to the div using jQuery:

Transform: matrix(1, 0, 0, 1, 461, 300)

But that div has already inline style

Transform: translate3d(0px, 0px, 0px)

When I am assigning the css through jQuery, it is not accepting.

$(“#myDiv”).css("transform", "matrix(1, 0, 0, 1, 461, 300)");

How to resolve the issue?

Update:

I'm also using the JS file at the bottom of the page(i.e below </body> tag). I have written the code in $(window).load(function(){}) event and it is applying. But I'm having flickering effect due to position interchanging.

Can you create a Fiddle with your problem so I can see the broader scope here? — FastTrack
– FastTrack, Commented Nov 20, 2013 at 13:36
Why don't you create a class for it and add it to it using .addClass()? — Dhaval Marthak
– Dhaval Marthak, Commented Nov 20, 2013 at 13:37
You could replace the whole attribute: (“#myDiv”).attr("style", "transform:matrix(1, 0, 0, 1, 461, 300)"); — Moob
– Moob, Commented Nov 20, 2013 at 13:39
jQuery sets the styles with just regular JS, as in element.style, and that actually inserts the styles inline, so setting the same CSS property with javascript as any style already present inline, will overwrite the inline style, and the one added with javascript takes presedence. The only styles not easily overridden are styles set in a stylesheet with !important. If it's not working, you're doing something else wrong, as in the syntax is not correct. — adeneo
– adeneo, Commented Nov 20, 2013 at 13:42

Milind Anantwar · Accepted Answer · 2013-11-20 13:43:05Z

3

Check this out:

setTimeout(function(){
    $("#myDiv").css("transform", "matrix(1, 0, 0, 1, 461, 300)");
}, 1000);

I set the timeout to be able of see the change.

Working Demo

I would say that the problem is because of this weird quotes you have around #myDiv.

edited Nov 20, 2013 at 13:43

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

answered Nov 20, 2013 at 13:42

Adminiculo

3331 silver badge15 bronze badges

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

Comments

Smamatti · Accepted Answer · 2013-11-20 13:52:59Z

0

You have the wrong quotes in you selector: $(“#myDiv”)

$("#myDiv").css("transform", "matrix(1, 0, 0, 1, 461, 300)"); works fine for me now:

Sample
http://jsfiddle.net/xQ3bJ/

answered Nov 20, 2013 at 13:52

Smamatti

3,9313 gold badges34 silver badges44 bronze badges

Comments

zzlalani · Accepted Answer · 2013-11-20 13:38:05Z

-1

Try adding !important to the css rule, as in:

$(“#myDiv”).css("transform", "matrix(1, 0, 0, 1, 461, 300) !important");

edited Nov 20, 2013 at 13:38

zzlalani

24.6k16 gold badges48 silver badges73 bronze badges

answered Nov 20, 2013 at 13:36

user1021726

64810 silver badges24 bronze badges

2 Comments

Satpal Over a year ago

!important is not supported by JQuery as you are using it . Moreover inline css overrides css classes

adeneo Over a year ago

You can not add !important to the CSS in javascript, at least not like that

Collectives™ on Stack Overflow

Overriding the inline CSS with jQuery

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related