Para criar designs de páginas da web dinâmicos e com pixels perfeitos, as medições do tamanho da janela são muito importantes para serem compreendidas e usadas. O layout de página web desejado pode não ser gerado se a medição da janela não for feita ou usada corretamente. Infelizmente, HTML/CSS não forneceu nenhum atributo ou propriedade para obter conhecimento preciso sobre o tamanho da tela da janela e a distância da janela em relação aos limites originais da tela.
Felizmente! JavaScript resolve esse problema fornecendo seu “ window.screenLeft” e “window.screenTop ”Propriedades para medir a posição da janela em ambos os“ x” e “eixo y ”Respectivamente. Nosso foco principal neste artigo é obter uma posição ao longo do eixo X com a ajuda do “ janela.screenLeft ' propriedade. Então vamos começar!
Este blog explicará o procedimento para usar ou acessar a propriedade window.screenLeft em JavaScript.
Como acessar a propriedade “window.screenLeft” em JavaScript?
O ' janela.screenLeft ”propriedade do JavaScript retorna as informações relacionadas à posição horizontal de uma janela, em relação à tela. Esta propriedade retorna o valor numérico em formato pixel, mostrando a distância horizontal da janela em relação à tela. Visite o código abaixo, no qual o “ janela.screenLeft ”propriedade está sendo utilizada:
< corpo >
< h1 estilo = 'cor: verde mar;' > Linux < / h1 >
< p eu ia = 'alvo' > < / p >
< roteiro >
deixe i = window.screenLeft;
document.getElementById('target').innerHTML = 'Esquerda: ' + i;
< / roteiro >
< / corpo >
Descrição do código acima:
- Primeiro, o HTML “ p ”O elemento é criado com um id de“ alvo ”.
- A seguir, o “ janela.screenLeft ”A propriedade é usada dentro do“< roteiro >” tag e armazena o resultado na variável “ eu ”.
- Em seguida, selecione o elemento com um id de “ alvo ’ e insira o valor do “ i” variável usando o “ HTML interno ' propriedade.
A visualização da página da web é a seguinte:
A saída mostra que a distância horizontal do limite esquerdo da tela é de zero pixels.
Exemplo: Recuperando Dinamicamente o Valor Horizontal
A propriedade screenLeft pode ser usada junto com o “ redimensionar ”Listener de eventos para fornecer a posição em tempo real da janela correspondente à tela ao longo do eixo x. Da mesma maneira, a posição ao longo do eixo y ou eixo vertical também pode ser recuperada utilizando o “ janela.screenTop ' propriedade. Vamos ter um código para o cenário fornecido:
< corpo >< h1 estilo = 'cor: verde mar;' > Linuxhint < / h1 >
< p eu ia = 'teste' >< / p >
< roteiro >
função dinâmica ( ) {
deixe eu = janela.screenLeft;
deixe j = janela.screenTop;
documento.getElementById ( 'teste' ) .innerHTML = 'Posição da direção esquerda:' + eu + ', Da direção superior:' +j;
}
janela.addEventListener ( 'redimensionar' , dinâmico ) ;
< / roteiro >
A explicação do código acima é a seguinte:
- Primeiro, o elemento de destino foi criado com um id de “ teste ”.
- A seguir, o “< roteiro >” é usada e a tag “ dinâmico ()” a função é criada nele.
- Dentro da função, utilize o “ window.screenLeft” e “window.screenTop ”propriedades e armazene-as em“ eu” e “j ”variáveis respectivamente.
- Depois disso, selecione o elemento alvo obtendo seu id “ teste ”E com a ajuda do“ HTML interno ”propriedade exibe os valores para ambos“ eu” e “j ”Variáveis na página da web.
- No final, anexe o “ redimensionar ”ouvinte de evento com o“ janela ”que invoca o“ dinâmico ()”funciona sempre que o tamanho da janela é alterado.
Pré-visualização da página web após o final da compilação:
Na saída acima, a diferença da janela entre os lados superior e esquerdo é recebida em pixels à medida que a janela é redimensionada.
Isso é tudo sobre o “ janela.screeLeft ”propriedade em JavaScript.
Conclusão
Para acessar o “ janela.screenLeft ”Propriedade em JavaScript e anexe o“ redimensionar ”ouvinte de evento para“ janela ”. Isso invoca a função de retorno de chamada sempre que o tamanho da janela é redimensionado. Dentro desta função, crie uma variável que armazene o “ janela.screenLeft ' propriedade. Além disso, recupere a referência do elemento alvo e exiba os valores desta variável sobre ele. Este blog explicou o processo de acesso à propriedade window.screenLeft em JavaScript.