Remove inline CSS in jQuery

Question

This inline CSS is generated by jssor-slider,

position: absolute; 
top: 0px; 
left: 0px; 
width: 1500px;
height: 700px; 
transform-origin: 0px 0px 0px; 
transform: scale(0.876644);

and I want to override it with,

position: absolute; 
top: 0px; 
left: 0px; 
width: 100%; 
height: 700px;

I tried it by the following,

$('#slider_container').width('100%');
$('#slider_container > div').css({'position': 'absolute', 'top': '0px', 'left':' 0px', 'width':' 10%', 'height':' 700px'});

I was successful, but this always remain.

transform-origin: 0px 0px 0px; 
transform: scale(0.876644);

How to remove this using jQuery?

When you say "inline css", do you mean that this is within <style></style> tags, or that it's within a style attribute on an html element? — Michael Earls
– Michael Earls, Commented Aug 15, 2016 at 14:54
you could flush the data in the style attribute first, then add what you need $('#slider_container').attr('style', '') Working fiddle — Chax
– Chax, Commented Aug 15, 2016 at 15:41

Hunter Turner · Accepted Answer · 2016-08-15 20:50:13Z

2

Just set the transform back to its default value. Which for transform is scale(1), and for transform-origin is 50% 50% 0.

jQuery

$('#slider_container > div').css({'transform': 'scale(1)', 'transform-origin': '50% 50% 0'});

JSFiddle (Before)

JSFiddle (After)

*Note This solution is acceptable if the styles are defined from a stylesheet. Otherwise, if they are defined inline (which was recently clarified by the OP), then Rudi Urbanek's solution would be ideal.

$('#slider_container > div').removeAttr("style");

edited Aug 15, 2016 at 20:50

answered Aug 15, 2016 at 14:46

Hunter Turner

6,94411 gold badges43 silver badges57 bronze badges

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

Comments

Rudi Urbanek · Accepted Answer · 2016-08-15 15:01:59Z

1

an easy solution is to first remove the inline style attribute before adding your new style.

$('#slider_container > div').removeAttr("style");
$('#slider_container > div').css({'position': 'absolute', 'top': '0px', 'left':' 0px', 'width':' 10%', 'height':' 700px'});

answered Aug 15, 2016 at 15:01

Rudi Urbanek

1,9531 gold badge15 silver badges16 bronze badges

Collectives™ on Stack Overflow

Remove inline CSS in jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related