Redimensionner tous les éléments contenant avec javascript en utilisant

J'ai une situation où je pense que l'utilisation de la métrique 'em' serait parfaite. J'ai un contenant avec plusieurs éléments à l'intérieur. Ces éléments utilisent tous em pour les dimensions, la taille des polices, les bordures .. tout. Je veux être en mesure de faire croître ou de réduire dynamiquement tous ces éléments en changeant simplement la valeur em du conteneur parent.Redimensionner tous les éléments contenant avec javascript en utilisant

Au moins c'est ma théorie. J'ai essayé d'implémenter quelque chose comme ça en utilisant jquery mais il semble que tout est converti en px et le changement de em n'a aucun effet sur les éléments enfants.

Voici un exemple:

<div id="parent"> 
    <div class="child">Text</div> 
    <div class="child">Text</div> 
    <div class="child">Text</div> 
</div> 

<style> 
    #parent { font-size: 1em; } 
    .child { width: 10em; height: 10em; font-size: 5em; } 
</style>

Avec javascript (jquery pour cet exemple), je voudrais pouvoir faire quelque chose comme ceci:

$('#parent').css('font-size', '2em') // This would make everything grow 
$('#parent').css('font-size', '.5em') // This would make everything shrink

Cette ligne ne produit pas Erreur. Cependant, après avoir inspecté plus loin, il semble que tout a été converti en px. Ainsi, les valeurs parentales perdent leur pouvoir. Voici ce que je veux dire:

Une fois la page rend, je lance ces commandes via la console Firebug

$('#parent').css('font-size'); // Returns 100px (for example's sake) 
$('.child:first').css('font-size'); // Returns 50px 
$('#parent').css('font-size', '2em'); // This should affect all children 
$('#parent').css('font-size'); // Returns 20px 
$('.child:first').css('font-size'); // STILL Returns 50px

Comme vous pouvez le voir, tous les enfants restent à 50px.

Est-ce que je vais dans ce sens? Qu'est-ce que je rate? Est-ce vraiment beaucoup plus difficile que je le pense? Dans un sens, j'essaie de reproduire l'effet qu'a le zoom-navigateur.

Merci pour toute aide.

Source

2009-06-28 Mike B

Vous essayez de redimensionner le texte en utilisant le pourcentage.

$('#parent').css('font-size', '200%')// This would make everything grow 
$('#parent').css('font-size', '50%') // This would make everything shrink

modifier après commentaire - en utilisant FF2.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <title>test</title> 
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
    <style type="text/css"> 
    body {font-size:10px;} 
    #parent { font-size: 1em; } 
    .child { width: 10em; height: 10em; font-size: 5em; } 
</style> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     alert($('#parent').css('font-size')); // Returns 10px (for example's sake) 
     alert($('.child:first').css('font-size')); // Returns 50px 
     $('#parent').css('font-size', '200%'); // or you can use 2em here 
     alert($('#parent').css('font-size')); // Returns 20px 
     alert($('.child:first').css('font-size')); // Returns 100px 
    }); 
</script> 
</head> 
<body> 
<div id="parent"> 
    <div class="child">Text</div> 
    <div class="child">Text</div> 
    <div class="child">Text</div> 
</div> 
</body> 
</html>

Source

2009-06-29 00:15:23 Emily

Mais un effet domino n'est-il pas possible? Je devrais utiliser cette technique pour tous les enfants avec toutes les règles de style dont j'ai besoin (largeur, hauteur, taille de police, bordure, etc.). Je suppose que dom traversal avec récursion est possible mais j'espérais éviter quelque chose comme ça. –

Cela affecte les enfants dans mes tests (ems et%).Peut-être que cela a quelque chose à voir avec l'exécution de la jquery dans la console firebug. Je vais coller le code que j'ai utilisé ci-dessus. – Emily

Eh bien, je me sens stupide ... Lorsque j'ai écrit mon code dans la page elle-même au lieu de la console firebug, il a fonctionné exactement comme je l'espérais. Merci pour votre aide Emily et jitter. –

Les travaux ci-dessus très bien pour moi dans Opera, FF et IE6 (ne peut pas tester d'autres). L'utilisation de ces deux appels augmente et réduit le texte.

$('#parent').css('font-size', '2em'); // grows 
$('#parent').css('font-size', '0.5em'); // shrinks

Avant d'appeler l'un de ces

alert($('#parent').css('fontSize'));  // 16px in Opera,FF,IE6 
alert($('.child:first').css('fontSize')); // 80px in Opera&FF, 400px in IE6

Après un appel à dire

$('#parent').css('font-size', '0.5em'); // shrinks 
alert($('#parent').css('fontSize'));  // 0.5em in Opera,FF,IE6 
alert($('.child:first').css('fontSize')); // 45px Opera, 40 px FF, 200px in IE6

Alors, que les navigateurs (version) et la version jQuery utilisez-vous?

Source

2009-06-29 00:33:09 jitter

C'est génial, je viens juste de passer à em-s, et je me tortillais pour définir les hauteurs appropriées pour les divs en cas de changement de police. grâce à ce post j'ai fait quelque chose comme ça (ps. Je ne sais pas vraiment javascript):

$(document).ready(function(){ 
    s=$('#parent').css('font-size');  
    s=(s.substring(0,s.length-2)); 
    x=s*1; //the only way I know to convert string to number 
    height1=document.getElementById('div-a').offsetHeight/x; 
    height2=document.getElementById('div-b').offsetHeight/x; 
    if (height1>height2) { 
     document.getElementById('div-b').style.height=height1+"em"; 
     //(...) 
    }});

Source

2009-07-16 17:16:16

Redimensionner tous les éléments contenant avec javascript en utilisant

Répondre

Questions connexes