Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Jon W
Jon W
6,185 Points

How do you remove a CSS property?

I'm trying to get FlexSlider to respond to the height as well as the width without distorting the image. I found the problem is that IMG within .flexslider .slider img is given "width: 100%". If I remove this using Chrome Devtools, it fixes the problem.

Now how do I do this with Jquery? I've tried:

$('.flexslider .slides img').css("width", "");

...however that doesn't remove the property, it just leaves it as it is.

I could modify flexslider.css I guess and change width: 100% to max-width: 100%, but don't really want to touch someone elses plugin.

2 Answers

Ryno Botha
PLUS
Ryno Botha
Courses Plus Student 4,055 Points
Ryno Botha
Ryno Botha
Courses Plus Student 4,055 Points

Try:

$('.flexslider .slides img').css({"width" : ""});
Ryno Botha
Ryno Botha
Courses Plus Student 4,055 Points

You also have the option of wholly removing the style attribute:

$('.flexslider .slides img').removeAttr("style");
Jon W
Jon W
6,185 Points

Hi Ryno.

I'm pretty sure your suggestion:

$('.flexslider .slides img').css({"width" : ""});

... is the same as mine its just you're selecting the property in an object. I tried it anyway and it still doesn't work.

I think I'm going to modify flexslider.css and change it to "max-width: 100%" and add a new style with "width: 100%" and add/removeClass in JQuery when I need it.

Btw I accidentally marked your answer as best answer when I shouldn't have. But I guess it is the best answer even though it didn't exactly solve my problem :-) Thanks anyways!

Ryno Botha
Ryno Botha
Courses Plus Student 4,055 Points

haha yeah ^^ well might be that you'll have to use !important to overwrite the width in the .css but think it'll be best to change it in the .css because we don't really want to use !important

Hope you get it to work~ x)

No problem x)

Ryno Botha
Ryno Botha
Courses Plus Student 4,055 Points

last one, xD Try:

$('.flexslider .slides img').attr('width', '');

Ryno Botha
Ryno Botha
Courses Plus Student 4,055 Points

Check:

http://www.jquery4u.com/dynamic-css-2/change-css-jquery/

Might find something useful~

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

What happens if you use JS to set the width to auto rather than "nothing"? If you are using the height to control the size of the image then width: auto should keep it in proportion.

I'm guessing this would be:

$('.flexslider .slides img').css("width", "auto");