No JavaScript, os elementos do documento de documentos são frequentemente obtidos, que é a abreviação inglesa do modelo de objeto de documento HTML. O modelo de objeto de documento para HTML é baseado na programação do navegador. O HTML DOM define uma série de objetos padrão usados para HTML, bem como métodos padrão para acessar e processar documentos HTML.
Através do DOM, todos os elementos HTML podem ser acessados, juntamente com o texto e as propriedades que eles contêm. O conteúdo pode ser modificado e excluído, e novos elementos podem ser criados. HTML DOM é independente da plataforma e linguagem de programação. Pode ser usado por qualquer linguagem de programação, como Java, JavaScript e VBScript.
ChildNodes retorna a matriz de todos os elementos filhos do elemento atual, Firschild retorna o primeiro elemento filho inferior do elemento atual, LastChild retorna o último elemento filho do elemento atual, retorna o elemento de elemento atual, o elemento atual, o elemento do elemento atual, o elemento do nodEvalue especifica o elemento anterior e o elemento de leitura/Write, o pai, o painel da corrente.
Document.getElementById é um elemento no documento que possui um valor de atributo de ID exclusivo especificado. Document.getElementByTagName Retorna uma matriz de elementos filhos com o nome de tag especificado no elemento atual. HaschildNodes () retorna um valor booleano indicando se o elemento tem elementos filhos. Document.getElementBycclassName é obter o elemento de nome da classe no documento. Document.getElementsByName (ElementName): Obtenha o nó através do nome. A partir do nome, pode -se observar que esse método retorna não um elemento do nó, mas uma variedade de nós com o mesmo nome. Em seguida, podemos percorrer o atributo do nó para obter um loop para determinar se é o nó necessário.
A largura do navegador que você deseja obter é a seguinte:
A largura da área visível da página da web: document.body.clientwidth
A altura da área visível da página da web: document.body.clientHeight
A largura da área visível da página da web: document.body.offsetWidth (incluindo a largura da linha de borda)
A altura da área visível da página da web: document.body.offSethEight (incluindo a largura da linha de borda)
Largura completa do texto da página da web: document.body.scrollwidth
Texto completo da página da web: Document.body.scrolHeight
A página da web é lançada em um nível alto: document.body.scrolltop
A esquerda da página da web sendo lançada: document.body.scrollleft
Na parte principal da página da web: Window.ScREENTOP
À esquerda do texto principal da página da web: Window.Screenleft
Resolução de tela alta: window.screen.height
Largura da resolução da tela: window.screen.width
Tela Disponível na altura do espaço de trabalho: window.screen.availHeight
Tela disponível Largura do espaço de trabalho: window.screen.availwidth
Vamos falar sobre isso em detalhes usando uma página da web de comércio eletrônico:
<html> <head> <title> </title> <style> *{margin: 0; preenchimento: 0;} a {decoração de texto: nenhum; Cor: White;} a: Passe o mouse {cor: Red;} ul, li, ol {estilo de lista: nenhum; Size da fonte: 13px; cor: #fff; altura da linha: 27px;} img {borda: nenhum;} img, entrada, selecione, textarae {vertical-align: médio} corpo {width: 1350px; margem: 0 automático; Fonte-tamanho: 12px;} ol li a {color: #fff;} #header {width: 1350px; Altura: 37px; Antecedentes: URL (122.png) sem repetição; fundo de borda: 1px Solid #C9C9C9; altura da linha: 37px;} #Main {Width: 1350px; Altura: 504px; Antecedentes: #f8f8;} #left {width: 182px; Altura: 500px; Antecedentes:#3d4e64; Radio de fronteira: 3px; float: esquerda;} #lunbo {largura: 1160px; Altura: 300px; Antecedentes:#f8f8; fundo de borda: 2px Solid #666666; Float: Certo; margem: 0 automático; Margin-top: 10px; Posição: relativa;} #lunbo img {width: 1160px; Altura: 300px; Exibir: Nenhum; Posição: Absoluto; Index z: 5; } ul {margin-left: 400px;} ul li {estilo de lista: nenhum; borda: 1px sólido #000; Radio de fronteira: 50%; Largura: 18px; Altura: 18px; Alinhamento de texto: centro; flutuar: esquerda; Margin-top: 300px; margem-esquerda: 10px; Z-Index: 15; } </style> </ad Head> <body> <div id = "cabeçalho"> <a href = "#"> <h3> Todas as categorias de produto </h3> </a> </div> <div id = "main"> <div id = "esquerd"> <ol style = "margin-top: 12px; margin-left: 14px; e-reader> </a> </p> <p> <a href = "#"> tablets de fogo> </a> </p> <p> <a href = "#"> kindle e-reader> </a> </li> <p> <a href = "#"> tablet> </a> </p> <p> <p> e-reader> </a> </li> <p> <a href = "#"> tablet> </a> </p> <p> <a href = "#"> Kindle E-Reader> </a> </p> <p> <a href = "#"> fogo "> </a> </p> <p> <p> <p> <a href = "#"> Tablet de fogo> </a> </p> <p> <a href = "#"> Kindle E-Reader> </a> </li> <p> <a href = "#"> Fire Tablet> </a> </p> <p> <a href = "#"> gentileza e- href = "#"> Tablet de fogo> </a> </p> <p> <a href = "#"> tablet> </a> </p> <p> <a href = "#"> Kindle E-Reader> </a> </li> <p> <a href = "#"> tablet> </a> Tablet> </a> </p> <p> <a href = "#"> Kindle E-Reader> </a> </li> <p> <a href = "#"> Fire tablet> </a> </p> <p> <a href = "#"> tablet> </a> </liey <sle <a <a href = "#"> tabela <p> <a href = "#"> tablet de fogo> </a> </p> <p> <a href = "#"> tablet> </a> </p> <p> <a href = "#"> tablet> </a> </p> <a> <a href = "#"> getle e- e-reader> Tablet> </a> </p> <p> <a href = "#"> Kindle E-Reader> </a> </li> <p> <a href = "#"> Fire Tablet> </a> </p> <p> <a href = "#"> Kindle Efreader "> </a> </li> <p> <a href ="#"> Kindle Efreader" e-reader></a></li> <p><a href="#">Fire Tablet></a></p> </ol> </div> <div id="lunbo"> <img src="1.png"> <img src="2.png"> <img src="3.png"> <img src="4.png"> <img src = "5.png"> <ul> <li style = "background: vermelho" onmouseover = "jin (0)" onmouseout = "chu (0)"> 1 </li> <li onMouseover = "jin (1)" jinuseout = "chu (1)"> 2 </li> <li onmousever = " <li onMouseOverover = "Jin (3)" onmouseout = "chu (3)"> 4 </li> <li onMouseover = "jin (4)" onmouseout = "chu (4)"> 5 </li> </ul> </div> <d id = "Foother"> <miMc = "121.f" </liv> <d id = "Foother"> <miMc = "121.f p = document.getElementsByTagName ("img"); l = document.getElementsByTagName ("li"); m = 0 onLload = function () {s = setInterval ("kaishi ()", 850)} função kaishi () {for (var i = 0; i <5; i ++) {p [i] .style.display = "nenhum"; l [i] .style.background = "white"} m ++; if (m> = 5) {m = 0;} p [m] .style.display = "bloqueio"; l [m] .style.background = "Red"} lunbo.onMouseOver = function () {ClearInterval (s);} lunbo.onMouseOut = function () {s = setInterval ("Kaishi ()", 850);} função jin (hand) {para (var i = 0; i <5; l [i] .style.background = "white"} m ++; if (m> = 5) {m = 0;} p [Hand] .style.display = "Block"; l [mão] .style.background = "Red"} função chu (mão) {m = hand; } </script> </html>O artigo acima JS opera elementos DOM e obtém a altura e a largura do navegador é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.