5

Numa dada página, ao abrir, preciso de remover a margin da classe content para ficar como pretendo.

CSS:

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

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

Estou a tentar ir por jquery ao fazer:

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

O que pretendo é remover/alterar a margin de .three-columns .content e .content

3 Respostas 3

9

Parece-me que está a definir o alvo da ação a realizar pelo jQuery de forma errada.

No teu CSS tens:

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

Para atingires o mesmo elemento via jQuery tens que usar o mesmo selector:

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

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

Por outro lado, parece que estás a repetir o código, visto que se queres alterar a margin do elemento com a classe de CSS content, basta uma linha:

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

Mas se existe algo mais que não está a apresentar na pergunta, podes também usar uma só linha para definir o mesmo estilo para ambos os elementos fazendo uso da separação de selectores:

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

Se quiseres simplificar, dado o valor da margem ser igual para o topo, direita, fundo e esquerda, podes usar:

$(".three-columns .content, .content").css({
    'margin' : '10px'
});
1
  • É isto mesmo, obrigado! Commented 13/02/2014 às 14:52
6

Você esta utilizando o símbolo #, que seleciona elementos pelo seu atributo id. Utilize um ponto ao invés desse caractere, e você obterá os elementos que possuírem aquela classe.

Ficaria assim:

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

O mesmo vale para o CSS. Se quiser aplicar determinada formatação, via CSS, a elementos que contenham um id específico, utilize o caractere # ao invés do ponto.

5
  • Não esta a resultar. Se eu comentar ambas as propriedades no ficheiro do css, o layout fica como quero. Agora a alterar não está a resultar Commented 13/02/2014 às 14:48
  • Fiz uma pequena alteração no código, para passar múltiplos parâmetros ao invés de um objecto em cada chamada do método css do jQuery. Peço que tente novamente, utilizando essa forma. Commented 13/02/2014 às 14:50
  • 1
    Já sei onde está o problema no seu código (onde tive de alterar para funcionar, possivelmente funciona noutros casos): ".three-columns:content" para ".three-columns .content" Commented 13/02/2014 às 14:53
  • Ok, alterei novamente para refletir isso. Mas confesso que gostei mais da resposta do Zuul :) Commented 13/02/2014 às 14:56
  • Sim, vou colocar voto na sua reposta mas resposta aceite na dele. Obrigado ;) Commented 13/02/2014 às 14:57
0

Tente isso:

<script type="text/javascript">
    $(window).load(function(){
        $(".content").css('margin','10px');
    });
</script>
1
  • Isto funcionava no caso de não ter uma classe a partir de outra, ou seja, se .three-columns .content não existisse. Commented 13/02/2014 às 14:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .