Ir para o conteúdo
nine

Criar classes CSS dinamicamente

Mensagens Recomendadas

nine    0
nine

Estou a fazer um trabalho em que crio objectos html e coloco uma determinada classe. O que queria era criar o código css para essa classe através de javascript em vez de andar a adicionar o estilo a cada elemento.

Por exemplo :

// criar os elementos HTML

var newParagraph = document.createElement("div");
newParagraph.setAttribute("class","blue");

document.getElementById("container").appendChild(newParagraph);

O código é meramente explicativo, pode não estar a funcionar correctamente.

E o que preciso de saber era como criar o código css para definir a class blue através do JavaScript.

Desde já obrigado por qualquer ajuda.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
jreis    0
jreis

Não tenho a certeza, mas.... acho que não dá! Podes é definir as propriedades, mas isso pode dar muito trabalho... qualquer coisa assim:

...
newParagraph.style.color = 'blue';
newParagraph.style.margin-top = '10px';
...

Mas é a tal coisa, assim não tas a criar uma class...

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
nine    0
nine

É possível, encontrei sites na net que fazem isso, através da propriedade document.styleSheets.

Ainda não percebi bem é como fazem ...

Um site com código aqui.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
nine    0
nine

É possível mas a complexidade de implementação coloca a solução como pouco prática, pelo menos da forma como tenho visto que resolvem o problema.

Fica aqui mais um sitio com informação do funcionamento da  DOM e se alguém encontrar uma forma mais simples que avise.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora


×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade