Javascript pour la modification de style CSS dans le navigateur Google Chrome

Je suis face à un problème bizarre développement d'une application web aussi compatible que possible avec la plupart des navigateurs les plus populaires:Javascript pour la modification de style CSS dans le navigateur Google Chrome

J'ai un HTML que je veux déplacer dans la page de sa position d'origine à l'autre juste en cliquant sur un bouton.

Voici le code HTML:

<div id="content"> text content ... </div>

Le CSS associée:

div#content{ padding: 15px 15px 15px 215px; }

Et le javascipt pour déplacer le bloc en cliquant sur un bouton:

document.getElementById('content').style.padding="15px 15px 15px 15px";

=> Il fonctionne très bien dans Firefox, IE et Opera (essentiellement, il se développe un bloc de contenu de remplissage à l'origine de la moitié de la page à la page complète)

=> Alors que dans Chrome, le code javascript ne se développe pas largeur de bloc mais déplacez-le de 200px avec une largeur fixe (mais si je code dur les modifications de remplissage une à la fois, ça fonctionne bien ...)

J'espère que tout sera possible si quelqu'un a une solution. Merci d'avance.

Source

2009-10-17 Clem

Votre code semble faire le contraire de ce que vous dites; ça va de 215px à 15px. Aussi un test rapide ne montre aucune différence entre FF 3.5 et Chrome 3.0: http://jsbin.com/ubaru (http://jsbin.com/ubaru/edit) – brianpeiris

Merci pour la réponse! Oui, peut-être que j'ai été confus dans la description des mouvements ... de toute façon, je savais que ce ne serait pas facile à expliquer, alors j'ai téléchargé un échantillon rapide du problème: http: //clementjollet.iblogger.org/sandbox/ Voici le problème exact (travailler comme je le veux exactement dans FF, IE et Opera mais pas dans Chrome). Thx – Clem

Votre exemple, ainsi que mon propre fichier de test, semblent fonctionner dans Chrome (3.0.195.27). Peut-être que ce code est juste mais quelque chose d'autre l'affecte? En outre, +1 pour fournir un échantillon complet. – WillfulWizard

Si vous échangez le rembourrage de marge il fonctionne de la même manière dans Firefox et Chrome (sur mon PC de toute façon):

div#content{ 
    padding: 0; 
    margin: 15px 15px 15px 15px; 
    background: #fff; 
}

Et puis:

function hideSideBar(){ 
    document.getElementById('content').style.margin="15px 15px 15px 15px"; 
    document.getElementById('out').style.display="none"; 
    document.getElementById('in').style.display="block"; 
} 

function showSideBar(){ 
    document.getElementById('content').style.margin="15px 15px 15px 215px"; 
    document.getElementById('out').style.display="block"; 
    document.getElementById('in').style.display="none"; 
}

Vous pourriez avoir à muck autour avec quelques-uns des autres de vos styles pour faire la même apparence.

Je pense que ce que Chrome fait est justifiable (pas que j'ai examiné les spécifications à vérifier), en augmentant le remplissage devrait naturellement élargir le bloc.

Source

2009-10-17 23:00:01 robertc

Assez simple en effet! Mais ça marche parfaitement, merci beaucoup Robert! – Clem

Voici une autre approche qui pourrait être plus stable:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <style type="text/css"> 

    .MenuHidden #content { padding: 15px 15px 15px 15px; } 
    .MenuHidden #out { display: none; } 
    .MenuVisible #content { padding: 15px 15px 15px 215px; } 
    .MenuVisible #in { display: none; } 

    </style> 

    <script type="text/javascript"> 

    function showSideBar(visible) { 
     document.body.className = visible ? 'MenuVisible' : 'MenuHidden'; 
    } 

    </script> 

</head> 

<body class="MenuHidden"> 

    <div id="header">   
     <div id="out"><a href="#" onclick="showSideBar(false);">Close menu</a></div> 
     <div id="in"><a href="#" onclick="showSideBar(true);">Open menu</a></div> 
    </div> 

    <div id="content"> 
     <p> 
     Donec sodales 
     consectetuer nunc. Aenean nec augue. Curabitur commodo, felis at 
     tristique venenatis, nunc pede luctus risus, quis eleifend tellus 
     mauris eu nisl. Vivamus varius dictum tellus. Nam ornare sem ornare 
     justo. Praesent eget magna ut erat ullamcorper adipiscing. Suspendisse 
     potenti. Donec lorem. Sed in velit. Maecenas molestie pharetra lacus. 
     Donec in velit. In metus tortor, elementum in, porta vitae, posuere eu, 
     purus. Quisque quis est. Nunc odio nibh, aliquam eget, ultrices quis, 
     dignissim sit amet, augue. Mauris vitae turpis eget ligula porttitor 
     nonummy. Etiam pulvinar bibendum tellus. Nam nulla nisl, elementum nec, 
     posuere eget, dignissim vel, dolor. 
     </p> 
    </div> 

</body> 
</html>

Source

2009-10-17 21:19:20 Guffa

Merci à vous à Guffa! Malheureusement je l'ai juste testé sous Chrome 3.0.195.27 et ça ne change rien ... :( – Clem

Ajout overflow: auto; dans le contenu CSS div semble résoudre le problème causé lors du réglage du rembourrage à 215px.

#content { padding: 15px 15px 15px 15px; overflow: auto; }

Vous devez utiliser un peu de JavaScript pour résoudre le problème causé lors du retrait du rembourrage:

function hideSideBar(){ 
    var content = document.getElementById('content'); 
    content.style.padding="15px 15px 15px 15px"; 

    if (window.getComputedStyle) { 
    var para = content.getElementsByTagName('p')[0]; 

    var paraWidth = window.getComputedStyle(para, null).getPropertyValue('width'); 
    para.style.width = paraWidth; 

    setTimeout(function(){ 
     para.style.width = 'auto'; 
    }, 0); 
    } 

    document.getElementById('out').style.display="none"; 
    document.getElementById('in').style.display="block"; 
}

démonstration de travail: http://jsbin.com/eqowu (éditable via http://jsbin.com/eqowu/edit)

Source

2009-10-17 21:59:37 brianpeiris

Je l'ai essayé, oui, ça résout le problème de l'expansion vers la droite ... mais quand on clique une seconde fois sur faites-le revenir, ... attendez-le: le bloc de contenu ne correspond pas à la largeur de la fenêtre et conserve la largeur donnée par le premier extrait javascript ... merde!>< – Clem

J'ai modifié ma réponse à résoudre le deuxième problème – brianpeiris

Un dernier, mais non le moindre MERCI pour votre temps Brian! J'ai testé à la fois votre solution et celle de Robert ci-dessus.Elles fonctionnent très bien, et j'ai choisi le plus simple avec la propriété de marge.Tx – Clem

Javascript pour la modification de style CSS dans le navigateur Google Chrome

Répondre

Questions connexes