Discussion :

[pierrot10]

Bonjour à tous,

J'ai un code en javascript qui va identifier la résolution de l'écran du visiteur web.
J'aimerais que si la resolution est plus grande que x, Javascript applique une feuille de style, et si elle est plus petite, Javascript applique une autre feuille de style.
J'ai ce code qui fait bien l'affaire, mais je ne trouve pas comment appliquer une feuille style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
if ((screen.width>=1024) && (screen.height>=768))
{
/* Applique une feuille de style */
}
else
{
/* Applique l'autre feuille de tyle */
}
</script>

Milles mercis

[SpaceFrog]

avec des feuilles de style externes en modifiant dynamiquement le href d'une balise link

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" type="text/css" href="test.css" />

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementsByTagName('link')[0].href= ...

il doit bien y avoir une paire de codes dans les contributions

[pierrot10]

ha ok!

Mais qu'es-ce le [0] dans

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementsByTagName('link')[0].href= ...

Parce que j'ai trois feuille de style externe,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<link rel="stylesheet" type="text/css" href="test1.css" />
<link rel="stylesheet" type="text/css" href="test2.css" />
<link rel="stylesheet" type="text/css" href="test3.css" />

Et il faudrait que ca s'applique uniquement sur test2.css, par exemple.

[pierrot10]

J'ai aussi trouvé cette solution:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<link id="bg" href="css-bg.css" rel="stylesheet" type="text/css" />
<script language="JavaScript">
<!--
if ((screen.width>=1024) && (screen.height>=768))
{
document.getElementById('bg').href='css-bg-big.css';
}
else
{
}
//-->
</script>

Qu'en pensez-vous?

[SpaceFrog]

Oui repérer la balise link au moyen d'un id est une solution.
Il aurait sinon fallut boucler sur la collection de getElementsByTagName et tester le href.