Remove margin with jquery

Asked

Viewed 54 times

5

On a given page, when opening, I need to remove the margin class content to stay as I intend.

CSS:

.three-columns .content {
    margin: 20px 250px 0 250px;
}

.content {
    margin: 20px 0 0 250px;
}

I’m trying to go through jquery in making:

$("#three-columns:content").css({ 'margin': ' 10px 10px 10px 10px' }); //Sei que o erro está aqui
$("#content").css({ 'margin': ' 10px 10px 10px 10px' });

What I want is to remove/amend margin of .three-columns .content and .content

jquery html css

3 answers

9


It seems to me that you are setting the target of the action to be taken by jQuery in the wrong way.

In your CSS you have:

.three-columns .content { ... }
.content { ... }

To hit the same element via jQuery you have to use the same selector:

$(".three-columns .content").css({
    'margin' : '10px 10px 10px 10px'
});

$(".content").css({
    'margin' : '10px 10px 10px 10px'
});

On the other hand, it looks like you’re repeating the code, since if you want to change the margin element with CSS class content, just one line:

$(".content").css({
    'margin' : '10px 10px 10px 10px'
});

But if there’s something else you’re not presenting in the question, you can also use a single line to set the same style for both elements by making use of selector separation:

$(".three-columns .content, .content").css({
    'margin' : '10px 10px 10px 10px'
});

If you want to simplify, since the margin value is equal to the top, right, bottom and left, you can use:

$(".three-columns .content, .content").css({
    'margin' : '10px'
});

  • That’s right, thank you!

6

You are using the symbol #, that selects elements by their attribute id. Use a dot instead of this character, and you will get the elements that have that class.

Would look like this:

$(".three-columns .content").css('margin', ' 10px 10px 10px 10px');
$(".content").css('margin', ' 10px 10px 10px 10px');

The same goes for CSS. If you want to apply certain formatting, via CSS, to elements that contain a id specific, use the character # instead of the point.

  • This is not working. If I comment on both properties in the css file, the layout looks like I want it to. Now changing is not working

  • I made a small change to the code, to pass multiple parameters instead of an object in each method call css jQuery. I ask you to try again, using this form.

  • 1

    I already know where is the problem in your code (where I had to change to work, possibly works in other cases): ".three-columns:content" for ".three-columns .content"

  • Okay, I changed it again to reflect this. But I confess that I liked Zuul’s answer more :)

  • Yes, I will vote on your answer but accepted in his. Thank you ;)

0

Try this:

<script type="text/javascript">
    $(window).load(function(){
        $(".content").css('margin','10px');
    });
</script>

  • This would work in the case of not having one class from another, ie if .three-columns .content did not exist.

Browser other questions tagged jquery html css

You are not signed in. Login or sign up in order to post.