Curso de Programação em Javascript e HTML
204 pág.

Curso de Programação em Javascript e HTML


DisciplinaProgramação I20.541 materiais239.904 seguidores
Pré-visualização40 páginas
seguintes são totalmente 
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 199
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
equivalentes. No primeiro nós usamos o método getElementById() para obter o objeto 
que representa um elemento <img> que queremos controlar, e no segundo 
fornecemos o mesmo objeto como argumento da função. 
Exemplos de Aplicação
Efeito de mouseover simples com CSS 
<html>
<head>
 function mostrarContorno()
 {
 var obj=document.getElementById(&quot;sexy&quot;)
 obj.style.border=&quot;solid 2px blue&quot;
 }
 function retirarContorno()
 {
 var obj=document.getElementById(&quot;sexy&quot;)
 obj.style.border=&quot;solid 2px white&quot;
 }
<title></title>
</head>
<body>
 Passe com o mouse sobre a imagem<br>
 <img src=&quot;sexy.png&quot; style=&quot;border:solid 2px white&quot; id=&quot;sexy&quot;
 onmouseover=&quot;mostrarContorno()&quot; onmouseout=&quot;retirarContorno()&quot;>
</body>
</html>
Efeito de mouseover simples com CSS (versão 2)
<html>
<head>
 function mostrarContorno(obj)
 {
 obj.style.border=&quot;solid 2px blue&quot;
 }
 function retirarContorno(obj)
 {
 obj.style.border=&quot;solid 2px white&quot;
 }
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 200
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
<title></title>
</head>
<body>
 Passe com o mouse sobre a imagem<br>
 <img src=&quot;sexy.png&quot; style=&quot;border:solid 2px white&quot; id=&quot;sexy&quot;
 onmouseover=&quot;mostrarContorno(this)&quot; onmouseout=&quot;retirarContorno(this)&quot;>
</body>
</html>
12.2 Posicionamento e medição de elementos em DHTML
O HTML Dinâmico oferece propriedades que nos permitem medir e posicionar 
os elementos nas páginas com todo o rigor. Como já sabemos, os estilos CSS são a 
melhor forma que temos para posicionar um elemento, mas quando precisamos saber 
o local exato em que ele se encontra ou o seu tamanho exato, então precisamos de 
algo mais. Para esclarecermos bem este ponto comecemos por apresentar quatro 
novas propriedades que o DOM nos oferece:
Propriedade Descrição
offsetHeight Largura do elemento medida em pixels. Esta propriedade só 
pode ser lida.
offsetLeft Número de pixels que separam o início do elemento da 
extremidade esquerda da área onde é desenhada a página. 
Esta propriedade só pode ser lida.
offsetTop Número de pixels que separam o início do elemento do topo da 
área onde é desenhada a página. Esta propriedade só pode ser 
lida.
offsetWidth Altura do elemento medida em pixels. Esta propriedade só pode 
ser lida.
Nota: Estas propriedades estão presentes em objetos que representam 
elementos de bloco. 
O fato de podermos manipular e ler os valores guardados pela propriedade 
style pode levar-nos a pensar que estas quatro propriedades adicionais não são 
necessárias, mas isso não é verdade. Os estilos CSS podem ser usados de muitas 
maneiras: eles permitem designar tamanhos em pixels, em polegadas, em pontos ou 
como percentagens. Do posicionamento por CSS podem resultar valores que variam 
de browser para browser, de máquina para máquina e de usuário para usuário. É a 
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 201
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
própria filosofia dos estilos CSS que nos impede de saber quais as dimensões exatas 
de um elemento. 
É aqui que entram estas quatro propriedades. Aquilo que elas guardam são os 
tamanhos e as posições de cada elemento em cada instante. Quando 
redimensionamos a janela do browser os elementos podem mudar de posição na 
página mas os seus estilos CSS não sofrem alterações. Já as quatro propriedades que 
acabamos de ver são atualizadas sempre que ocorre uma alteração na página ou na 
janela do browser. 
Exemplos de Aplicação
Ler as dimensões e a posição de um elemento
<html>
<head>
 function lerProps()
 {
 var o=document.getElementById(&quot;caixa1&quot;)
 var s=&quot;style.width = &quot;+o.style.width
 s+=&quot;\nstyle.height = &quot;+o.style.height
 s+=&quot;\n\noffsetWidth = &quot;+o.offsetWidth
 s+=&quot;\noffsetHeight = &quot;+o.offsetHeight
 s+=&quot;\noffsetTop = &quot;+o.offsetTop
 s+=&quot;\noffsetLeft = &quot;+o.offsetLeft
 alert(s)
 }
<title></title>
</head>
<body>
 <div id=&quot;caixa1&quot; style=&quot;border: solid 1px red; width: 80%&quot;>
 <p>
 A largura desta caixa foi dada em CSS de forma relativa.
 Por isso a única forma de sabermos quantos pixels ela
 tem de largura é lendo o valor da propriedade offsetHeight.
 </p>
 </div><br>
 <a href=&quot;javascript:lerProps()&quot;>Clique aqui para ler as dimensões da caixa
 de cima</a> e compare com os valores obtidos através das propriedades CSS.
</body>
</html>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 202
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
Redimensionar um elemento
<html>
<head>
 function reduzir()
 {
 var o=document.getElementById(&quot;caixa1&quot;)
 o.style.width=(o.offsetWidth-50)+&quot;px&quot;
 }
<title></title>
</head>
<body>
 <div id=&quot;caixa1&quot; style=&quot;border: solid 1px red; width: 80%&quot;>
 <p>
 A propriedade offsetWidth nos permite saber sempre
 o valor correto da largura de um elemento.
 </p>
 </div><br>
 <a href=&quot;javascript:reduzir()&quot;>Clique aqui para retirar
 50 pixels da largura da caixa de cima</a>
</body>
</html>
Reposicionar um elemento
<html>
<head>
 function reposicionar()
 {
 var o=document.getElementById(&quot;caixa1&quot;)
 o.style.width=(o.offsetWidth-50)+&quot;px&quot;
 o.style.left=(o.offsetLeft+25)+&quot;px&quot;
 }
<title></title>
</head>
<body>
 <a href=&quot;javascript:reposicionar()&quot;>Clique aqui para retirar
 50 pixels da largura da caixa de baixo e deslocá-la
 25 pixels para a direita</a><br>
 <div id=&quot;caixa1&quot; style=&quot;border: solid 1px red; position: absolute&quot;>
 <p>
 As propriedades offsetLeft e offsetWidth permitem-nos
 saber sempre os valores corretos da coordenada horizontal
 e da largura de um elemento.
 </p>
 </div>
</body>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 203
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
</html>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 204
By: MaOzinha www.therebels.com.br
Carregar mais