1. Changer partiellement le style
Il existe trois types : changer le style direct, changer le nom de classe et changer le texte css. Les choses à noter sont :
Faites attention à la majuscule :
JavaScript est très sensible à la casse. ClassName ne peut pas écrire "N" comme "n", et cssText ne peut pas écrire "T" comme "t", sinon l'effet ne peut pas être obtenu.
Méthode d'appel :
Si vous modifiez className, déclarez la classe dans la feuille de style à l'avance, mais ne suivez pas le style lors de l'appel. Écrire comme document.getElementById('obj').style.className="..." est faux ! Il ne peut être écrit que sous la forme : document.getElementById('obj').className="…"
Changer le texte CSS
Mais si vous utilisez cssText, vous devez ajouter du style. La bonne façon de l'écrire est : document.getElementById('obj').style.cssText=”…”
Je n'ai pas besoin de parler de changement de style direct, n'oubliez pas d'écrire le style spécifique, tel que.
Copiez le code comme suit :
document.getElementById('obj').style.backgroundColor=”#003366″
2. Changer globalement de style
Normalement, nous pouvons réaliser un changement de style de page Web en temps réel en modifiant la valeur href du style de lien externe, c'est-à-dire en « modifiant le style du modèle ». À ce stade, nous devons d'abord donner un identifiant à la cible qui doit être modifiée, telle que
<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />
Il est très simple d'appeler, par exemple
<span on click="javascript:document.getElementById('css').href = 'ie.css'">Cliquez sur moi pour changer le style</span>
Les débutants ne savent souvent pas comment écrire des styles CSS spécifiques en JavaScript, et parfois les exigences sont différentes selon les navigateurs. Par exemple, float est écrit comme styleFloat dans IE et cssFloat dans FIREFOX, ce qui nécessite l'accumulation de chacun. La recherche de "ccvita javascript" dans Google peut dissiper vos doutes.
connaissances de base
Il existe généralement trois manières d'appeler des feuilles de style dans des pages Web.
La première : Lien vers un fichier de feuille de style externe (Lien vers une feuille de style)
Vous pouvez d'abord créer un fichier de feuille de style externe (.css), puis utiliser l'objet lien HTML. Les exemples sont les suivants :
Copiez le code comme suit :
<tête>
<title>Titre du document</title>
<link rel=stylesheet href="http://www.ccvita.com/demo.css" type="text/css">
</link></head>
En XML, vous l'ajouteriez dans la zone de déclaration comme indiqué dans l'exemple suivant :
Copiez le code comme suit :
< ?xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?>
Deuxième type : définir un objet bloc de style interne (intégration d'un bloc de style)
Vous pouvez insérer un
bloquer l’objet. Pour les méthodes de définition, veuillez vous référer à la syntaxe de la feuille de style. Les exemples sont les suivants :
Copiez le code comme suit :
<html>
<tête>
<title>Titre du document</title>
<style type="text/css">
<!--
corps {police : 10pt "Arial"}
h1 {police : 15 pts/17 pts "Arial" ; poids de la police : gras ; couleur : marron}
h2 {police : 13 pts/15 pts "Arial" ; poids de la police : gras ; couleur : bleu}
p {police : 10 pts/12 pts "Arial" ; couleur : noir}
-->
</style>
</tête>
<corps>
</body></html>
Veuillez noter que définir l'attribut type de l'objet style sur "text/css" permet aux navigateurs qui ne prennent pas en charge ce type d'ignorer la feuille de style.
Le troisième type : définition en ligne (styles en ligne)
La définition en ligne consiste à utiliser l'attribut de style de l'objet dans le balisage de l'objet pour définir les attributs de feuille de style qui s'y appliquent. Les exemples sont les suivants :
Copiez le code comme suit :
<p style="margin-left: 0.5in; margin-right:0.5in">Cette ligne a ajouté des patchs extérieurs gauche et droit</p><p> </p>