Desenvolvimento

Teste 2 - Uso de função JavaScript para obter propriedades de objetos

Um arquivo JavaScript chamado findDOM.js é importado para o documento. Ele contém o código da função findDOM(), de dois argumentos. O primeiro argumento deve ser o ID de um objeto, e o segundo (booleano) deve indicar se o acesso refere-se diretamente aos estilos do objeto (1) ou ao seu conjunto de propriedades (0).

Uma vez chamada, esta função retorna todo o conjunto de estilos ou de propriedades. O recurso a seguir é utilizado para acessar os estilos da figura da Lindinha (objeto "object1"), para a seguir alterar as propriedades style.left e style.top.

Aperte o botão para mover a foto da Lindinha.


     

Lindinha

Eis as partes cruciais do código desta página:

<head>
   <style type="text/css">
      #object1 {position: relative; visibility: show; left:10px}
   </style>
   <script type='text/javascript' src="../../js/findDOM.js"></script>
   <script type='text/javascript'>
      function moveObject(objectID) {
         domStyle = findDOM(objectID,1) // atribuição dos estilos de objectID à variável domStyle
         domStyle.left = 330+"px"       // modificação do estilo left
         domStyle.top = -50+"px"        // modificação do estilo top
      }
   </script>
</head>

<body>
   <button onclick="moveObject('object1')">Mover figura</button> &nbsp;&nbsp;&nbsp
   <button onclick='window.location.reload()'>Recarregar a Página</button> <br /><br />
   <div id='object1'>
      <img src='../pics/pht_beauty_original.jpg' alt='Lindinha' style='border-width: 0' />
   </div>
</body>

Atenção: A adição de +"px" na declaração dos novos valores de left e right é necessária devido ao Netscape e ao Firefox, que não reconhecem os números declarados sozinhos.

A seguir está o código do arquivo findDOM.js. A principal função do programa é detectar o tipo de browser do usuário, e qual a melhor forma de referenciar os objetos (que varia dependendo do browser). Isso tira do programador a necessidade de escrever diferentes e extensas linhas de código para cada browser.

var isDHTML = 0   // Presença de DOM
var isID = 0      // W3C DOM
var isAll = 0     // Internet Explorer All DOM
var isLayers = 0 // Netscape "Layer" DOM

if (document.getElementById) {isID = 1; isDHTML = 1}
else {
   if (document.all) {isAll = 1; isDHTML = 1}
   else {
      browserVersion = parseInt (navigator.appVersion)
      if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4))
         { isLayers = 1; isDHTML = 1 }
   }
}

function findDOM(objectID,withStyle) {
   /* Função para acessar os estilos do objeto objectID */
   if (withStyle == 1) {
      if (isID) {return (document.getElementById(objectID).style)}
      else {
         if (isAll) {return (document.all[objectID].style)}
         else {
            if (isLayers) {return (document.layers[objectID])}
         }
      }
   }

   /* Função para acessar outras propriedades do objeto objectID */
   else {
      if (isID) {return (document.getElementById(objectID))}
      else {
         if (isAll) {return (document.all[objectID])}
         else {
            if (isLayers) {return (document.layers[objectID])}
         }
      }
   }
}