| | auteurs : simone.51, denisC | On a quelquefois besoin de faire apparaître ou masquer certains objets. Comme par exemple pour des info-bulles, des menus, ...
Voici deux fonctions qui permettent de faire apparaître ou disparaître un objet passé en paramètre.
function afficher(obj){
document.getElementById(obj).style.display = "block";
}
function cacher(obj){
document.getElementById(obj).style.display = "none";
}
|
|
| | auteur : denisC | On peut accéder au style réel (celui qui prend en compte toutes les
règles des container et des class d'un élément) de la façon suivante :
element.currentStyle
window.getComputedStyle(element, null)
|
L'objet résultant de ces deux fonctions a les mêmes propriétés que l'attribut
style d'un élément normal.
Pour un script cross-navigateurs:
elementCptedStyle = element.currentStyle || window.getComputedStyle(element, null);
|
|
| | auteur : BrYs |
Voici la table de correspondance entre propriété CSS et propriété JavaScript
de l'objet style correspondant:
| Attribut CSS |
Propriété JavaScript |
| text-decoration |
textDecoration |
| text-indent |
textIndent |
| text-transform |
textTransform |
| list-style |
listStyle |
| list-style-image |
listStyleImage |
| list-style-position |
listStylePosition |
| list-style-type |
listStyleType |
| padding-bottom |
paddingBottom |
| padding-left |
paddingLeft |
| padding-right |
paddingRight |
| padding-top |
paddingTop |
| page-break-after |
pageBreakAfter |
| page-break-before |
pageBreakBefore |
| border-bottom |
borderBottom |
| border-bottom-color |
borderBottomColor |
| border-bottom-style |
borderBottomStyle |
| border-bottom-width |
borderBottomWidth |
| border-color |
borderColor |
| border-left |
borderLeft |
| border-left-color |
borderLeftColor |
| border-left-style |
borderLeftStyle |
| border-left-width |
borderLeftWidth |
| border-right |
borderRight |
| border-right-color |
borderRightColor |
| border-right-style |
borderRightStyle |
| border-right-width |
borderRightWidth |
| border-style |
borderStyle |
| border-top |
borderTop |
| border-top-color |
borderTopColor |
| border-top-style |
borderTopStyle |
| border-top-width |
borderTopWidth |
| border-width |
borderWidth |
| margin-bottom |
marginBottom |
| margin-left |
marginLeft |
| margin-right |
marginRight |
| margin-top |
marginTop |
| line-height |
lineHeight |
| letter-spacing |
letterSpacing |
| vertical-align |
verticalAlign |
| z-index |
zIndex |
| background-attachment |
backgroundAttachment |
| background-color |
backgroundColor |
| background-image |
backgroundImage |
| background-position |
backgroundPosition |
| background-repeat |
backgroundRepeat |
| float |
cssFloat |
Les autres propriétés ont le même format en CSS et en JavaScript
(border, font, margin, overflow, padding, position, ...).
|
| | auteur : trotters213 |
Il est parfois nécessaire de placer deux éléments HTML l'un à coté de l'autre.
Or, pour des raisons esthétiques, on préfère souvent que ces éléments aient la même taille,
définie en fonction du plus grand. Cela peut se faire facilement en JavaScript,
comme le montre cette fonction :
window.onload=ajuste;
function ajuste(){
var gauche=document.getElementById('div_gauche');
var droite=document.getElementById('div_droite');
if(gauche.offsetHeight>droite.offsetHeight){
droite.style.height=gauche.offsetHeight+"px";
}
else{
gauche.style.height=droite.offsetHeight+"px";
}
}
|
|
lien : Exemple d'utilisation de ce script
|
| | auteurs : Bovino, SpaceFrog |
La propriété style des objets HTML en JavaScript permet de récupérer ou d'assigner des styles pour des éléments.
Ca marche très bien pour récupérer les styles déclarés inline (via l'attribut HTML ou la propriété JavaScript style),
car dans ces cas, la propriété est affectée à l'objet JavaScript correspondant.
Ce n'est pas le cas si le style est déclaré dans une feuille de style CSS (fichier externe ou balises <style>) voire s'il n'est pas défini.
Dans ces cas, l'appel à la propriété JavaScript renverra une chaine vide.
Si vous souhaitez récupérer un style, qu'il ai été ou non déclaré, il faut passer par la fonction currentStyle pour IE et getComputedStyle pour les autres navigateurs :
function recup_style(){
if(window.getComputedStyle){
alert(window.getComputedStyle(document.body,null).fontSize);
}
else{
alert(document.body.currentStyle.fontSize);
}
}
|
Vous constaterez que currentStyle est une méthode de l'objet HTML lui-même alors que
getComputedStyle() est une méthode de l'objet window, elle prend deux arguments :
- L'élément HTML dont on veut récupérer le style ;
- Une pseudo-classe ou null.
Attention aux unités renvoyées. IE renvoie les unités déclarées ou des pt par défaut, FF renvoi systématiquement des valeurs en px !
|
lien : Exemple d'utilisation de ce script
|
Consultez les autres F.A.Q.
 
|
|
Les sources présentées sur cette page sont libres de droits
et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation
constitue une œuvre intellectuelle protégée par les droits d'auteur.
Copyright © 2004 Developpez Developpez LLC.
Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne
peut être faite de ce site ni de l'ensemble de son contenu : textes, documents
et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez
selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
