2012-07-30 32 views
6

yoluyla vücut etiketi stilini değiştirme. Böyle bir şey:Ben kullanıcının istemci genişliğini dikkate sayfanın genişliğini değiştirmek için bir senaryo yazmaya çalışıyorum 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(); 
}; 

Firebug dan bir hata alıyorum Bu komut ile:

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

Şimdi benim sorum, nasıl bedenin tarzını erişebilir edilir

? Çünkü css sayfasında seçici ve genişlik özelliği tanımlanmıştır.

+0

deneyin ** 'getComputedStyle (elemanlar) [tarzı]' ** ve örneğin ** 'window.getComputedStyle (document.body) .width' ** .. http://javascript.info/tutorial/styles-and-classes-getcomputedstyle – KingRider

cevap

15

Bu işlev yalnızca bir <body> var olsa bile, düğümlerin bir listesini döndürür.

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

Şimdi, bunu, bunun yerine JavaScript yerine CSS ile yapmak isteyebilirsiniz.

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

Medya sorguları, tüm diğer modern tarayıcılarda IE9 ve hemen hemen çalışır: CSS medya sorguları ile, bu tür ayarlamalar yapmak. IE8 için JavaScript'e geri dönebilir veya sadece vücudun viewport genişliğinin veya bir şeyin% 100'ünün olmasına izin verebilirsiniz. elemanları ulaşmak için [] kullanmak gerekir böylece

+0

çok teşekkürler. Medya sorguları ile, crossbrowser sorunları hakkında endişelenmeli miyim? – Nojan

+1

@ NOjAN İyi IE8 ve daha önceleri medya sorgularını desteklemiyor. Aksi takdirde oldukça iyi hatta iOS ve Android vb desteklenen konum – Pointy

+1

değil ihtiyaç ** getElementsByTagName ** gýcýk diğer tarayıcı mevcut deneyin ** 'document.body' ** – KingRider

3

getElementsByTagName düğüm dizisi döndürür.

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

daima yerine document.getElementsByTagName 'arasında document.body'' kullanımı ("vücut") [0]' –

2

document.getElementsByTagName("body")[0].style Sana document.getElementsByTagName("body")HTMLCollection olduğu geri almak neye inanıyorsun deneyin. İstediğiniz şeyi almak için document.getElementsByTagName("body")[0].style'u kullanabilmeniz gerekir.

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

Örnek:.

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