Le corps de changer la balise style à l'aide de JavaScript

Je suis en train d'écrire un script pour modifier la largeur de la page, compte tenu de l'utilisateur de la largeur du client.
C'est quelque chose comme ceci:

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();
};

Avec ce script, j'obtiens une erreur de Firebug:

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

Maintenant, ma question est, comment puis-je accéder au style de corps? Parce que dans la feuille css son sélecteur de largeur et de propriété sont définis.

InformationsquelleAutor Nojan | 2012-07-30
  1. 18

    Que cette fonction renvoie une liste de nœuds, même si il n'y a qu'un <body>.

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

    Maintenant, cela étant dit, vous pouvez le faire avec du CSS au lieu de JavaScript. Avec les CSS media queries, vous faire de tels ajustements:

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

    Requêtes de média travail dans IE9 et à peu près tous les autres navigateurs modernes. Pour IE8 vous pouvez retomber en JavaScript ou tout simplement de laisser le corps 100% de la fenêtre d'affichage de la largeur ou de quelque chose.

    • merci beaucoup. avec les media queries, devrais-je être préoccupé par crossbrowser questions ?
    • bien IE8 et versions antérieures ne prennent pas en charge les requêtes de média. Sinon, ils sont assez bien pris en charge, même sur iOS et Android, etc.
    • Pas besoin de getElementsByTagName est exister bug de navigateur et d'autres, essayez de document.body
    • Toujours utiliser document.body au lieu de document.getElementsByTagName("body")[0]
    InformationsquelleAutor Pointy
  2. 9
    document.getElementsByTagName("body")[0].style
    • Toujours utiliser document.body au lieu de document.getElementsByTagName("body")[0]
    • thx bro!
    InformationsquelleAutor voodoo417
  3. 3

    getElementsByTagName retourne un tableau de nœuds de sorte que vous devez utiliser [] d'accéder à des éléments.

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

    InformationsquelleAutor Snow Blind
  4. 2
    document.getElementsByTagName('body')[0].style = 'your code';

    Exemple:

    document.getElementsByTagName('body')[0].style = 'margin-top: -70px';
    InformationsquelleAutor Naing Min Khant
  5. 2

    Je crois que ce que vous obtenez de retour de document.getElementsByTagName("body") est HTMLCollection. Vous devriez être en mesure d'utiliser document.getElementsByTagName("body")[0].style pour obtenir ce que vous voulez.

    InformationsquelleAutor shannon.stewart