Duvida DOM/JavaScript

Fábio Caparica de Luna (listas)

unread,

Sep 4, 2005, 1:00:58 PM9/4/05

to ar...@googlegroups.com

Sou 'meio' tapado/atrapalhado para javascript e estudei muito pouco
sobre DOM.

Alguem pode dar uma mão ?

Queria alterar as propriedades de um <body> *sem* precisar dar *reload* na
página.

Sair de:

body{
background-color: #000;
}

Para:

body{
background-color: #000;
background-image : url(imgs/background01.jpg);
background-position : center;
background-repeat : no-repeat;
}

Inicialmente, seria apenas acrescentar uma img de background neste
posicionamento. MAS, se o script permitir passar o nome da img (ou o caminho
inteiro) como se fosse uma variavel, tambem não seria mal.

Alguem ?
Alguem ?

Fábio Caparica de Luna
http://sinistras.aranha.com.br/

Rafael Mendes H. Perez

unread,

Sep 4, 2005, 1:20:48 PM9/4/05

to ar...@googlegroups.com

sure..

function setBodyBg(bg) {
var s=document.getElementsByTagName('body')[0].style;
s.backgroundColor='#000';
s.backgroundImage='url("'+bg+'")';
s.backgroundPosition='center';
s.backgroundRepeat='no-repeat';
}

[]s
Rafael

João Vagner Brito de Medeiros

unread,

Sep 4, 2005, 1:40:33 PM9/4/05

to ar...@googlegroups.com

Rafael, não querendo ser chato, hehe mas pra mim tentar entender,
poderia explicar o que cada coisa faz? fico um pouco confuso...

Agradeço :-)
Em 04/09/05, Rafael Mendes H. Perez<cryog...@gmail.com> escreveu:

--
João Vagner
Viva o PHP -> http://www.vivaophp.com.br
Brclube -> http://www.brclube.net

\\ Imaginação Livre //
// Mente Criativa \\

diego nunes

unread,

Sep 4, 2005, 3:17:55 PM9/4/05

to ar...@googlegroups.com

O ideal, nesses casos, é não fazer o JavaScript mudar as
propriedades, e sim a classe do body.

document.body.className+=' blabla'; pra acrescentar, e...
(tB=document.body).className=tB.className.replace(' blabla', '');

No CSS:
body { background: red; }
body.blabla { background: blue; (...) }

Amplexos.

--
~~ ~
diego nunes
web engineer
~ ~~

Rafael Mendes H. Perez

unread,

Sep 4, 2005, 6:45:45 PM9/4/05

to ar...@googlegroups.com

Isso complica se ele quer parametrizar a função, mudar a imagem
on-the-fly. Mas em determinados casos, sem dúvida é melhor isolar toda a
estética no CSS. Tudo depende do que ele está tentando fazer.

[]s
Rafael

Rafael Mendes H. Perez

unread,

Sep 4, 2005, 6:52:50 PM9/4/05

to ar...@googlegroups.com

A primeira linha, s=..... puxa uma array com todos os elementos BODY do
documento e como um documento só contem um body, o índice [0] segurará o
dito-cujo. Aí eu puxo o objeto style deste body, que contém todos os
estilos in-line do mesmo, e coloco na variável s. Em seguida defino as
propriedades deste objeto style, note que o nome de todas é identico ao
do CSS, só mudando nos casos onde há um "-" (hífen), que é suprimido e a
segunda palavra capitalizada (background-color vira backgroundColor).
Detalhe que em backgroundImage, componho o valor da propriedade com o
parâmetro bg, que é passado pra função quando da sua chamada. Exemplo:

setBodyBg("/imgs/fundo1.gif");

colocará "imgs/fundo1.gif" como imagem de fundo.

Espero ter esclarecido agora :)

[]s
Rafael

Fábio Caparica de Luna (listas)

unread,

Sep 4, 2005, 10:46:44 PM9/4/05

to ar...@googlegroups.com

Senhores...

Obrigado pelas 'dicas'. Ainda nem peguei no código pra começar a implementar
mas acredito que já seja o suficiente pra desempacar aqui.

Qualquer coisa, volto a pertuba-los.

Ps.:
Reforçando, Valeu.

Fábio Caparica de Luna
http://sinistras.aranha.com.br/

Reply all

Reply to author

Forward