Cambiar el estilo de etiqueta de cuerpo a través de JavaScript

Estoy tratando de escribir una secuencia de comandos para cambiar el ancho de la página, teniendo en cuenta el ancho del cliente del usuario. es algo como esto:Cambiar el estilo de etiqueta de cuerpo a través de JavaScript

function adjustWidth() { 
    width = 0; 
    if (window.innerHeight) { 
     width = window.innerWidth; 
    } else if (document.documentElement && document.documentElement.clientHeight) { 
     width = document.documentElement.clientWidth; 
    } else if (document.body) { 
     width = document.body.clientWidth; 
    } 
    if (width < 1152) { 
     document.getElementsByTagName("body").style.width="950px"; 
    } 
    if (width >= 1152) { 
     document.getElementsByTagName("body").style.width="1075px"; 
    } 
} 
window.onresize = function() { 
    adjustWidth(); 
}; 
window.onload = function() { 
    adjustWidth(); 
};

Con este guión me sale un error de Firebug:

document.getElementsByTagName("body").style is undefined

Ahora mi pregunta es, ¿cómo puedo acceder al estilo de cuerpo? Porque en la hoja de css se definen su propiedad de selector y ancho.

Fuente

2012-07-30 Nojan

try ** 'getComputedStyle (elementos) [estilo]' ** y el ejemplo ** 'window.getComputedStyle (document.body) .width' ** .. . aprender http://javascript.info/tutorial/styles-and-classes-getcomputedstyle – KingRider

Esa función devuelve una lista de nodos, aunque solo hay un <body>.

document.getElementsByTagName("body")[0].style = ...

Ahora, dicho esto, es posible que desee ver en hacer esto con CSS en lugar de JavaScript. Con las consultas de medios CSS, hacer tales ajustes:

@media screen and (max-width: 1151px) { 
    body { width: 950px; } 
} 
@media screen and (min-width: 1152px) { 
    body { width: 1075px; } 
}

Las consultas de medios trabajan en IE9 y casi todos los demás navegadores modernos. Para IE8 puede recurrir a JavaScript o simplemente dejar que el cuerpo sea el 100% del ancho de la ventana gráfica o algo así.

Fuente

2012-07-30 12:25:33 Pointy

muchas gracias. con las consultas de los medios, ¿debería preocuparme por los problemas con los navegadores cruzados? – Nojan

@NOjAN bien IE8 y versiones anteriores no son compatibles con consultas de medios. De lo contrario, tienen un buen soporte, incluso en iOS y Android, etc. – Pointy

No es necesario ** getElementsByTagName ** existe error en otro navegador, prueba ** 'document.body' ** – KingRider

getElementsByTagName devuelve una matriz de nodos por lo que debe usar [] para acceder a los elementos.

Trate document.getElementsByTagName("body")[0].style

Fuente

2012-07-30 12:25:44

document.getElementsByTagName("body")[0].style

Fuente

2012-07-30 12:27:22 voodoo417

Siempre use' document.body' en lugar de 'document.getElementsByTagName (" body ") [0]' –

creo que lo que hay detrás de document.getElementsByTagName("body") es HTMLCollection. Debería poder usar document.getElementsByTagName("body")[0].style para obtener lo que desea.

Fuente

2012-07-30 12:31:53

document.getElementsByTagName('body')[0].style = 'your code';

Ejemplo:.

document.getElementsByTagName('body')[0].style = 'margin-top: -70px';

Fuente

2017-09-19 04:39:16

Cambiar el estilo de etiqueta de cuerpo a través de JavaScript

Respuesta

Cuestiones relacionadas