Remove margin with jquery

Question

Remove margin with jquery

Navigation

#1 by (9 votes)
#2 by (6 votes)
#3 by (0 votes)

5

On a given page, when I open, I need to remove margin from class content to stay as I want.

CSS:

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

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

I'm trying to go through jquery when doing:

$("#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 / change the margin from .three-columns .content and .content

html jquery css

asked by anonymous 13.02.2014 / 15:43

3 answers

6

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

It 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 specific id , use the character # instead of the point.

13.02.2014 / 15:45

0

Try this:

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

13.02.2014 / 15:49

How to increase the space between text and underline in CSS? When calling supername method when overwriting a method?

score 9 · Accepted Answer

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

In your CSS you have:

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

To reach 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 seems that you are repeating the code, since if you want to change the margin of the element with the CSS class content , just one line:

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

But if there is something else that you are not presenting in the question, you can also use a single line to define the same style for both elements by making selector selections:

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

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

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