recherche

Maison  >  Article  >  interface Web  >  Explication détaillée de la modification JavaScript du code de style CSS local et global

Explication détaillée de la modification JavaScript du code de style CSS local et global

伊谢尔伦
伊谢尔伦original
2017-07-19 16:32:582581parcourir

Modifier le style CSS est assez pratique dans certains cas. Vous pouvez modifier dynamiquement certains styles. Ensuite, je vais vous présenter comment le faire en utilisant JavaScript

1 Changer partiellement le style
Il y en a trois. types : changement de style direct, changement de className et changement de cssText. Ce qu'il faut noter est :
Faites attention à la majuscule :
Javascript est très sensible à la majuscule. ClassName ne peut pas écrire "N" comme "n", et cssText ne peut pas écrire "T" comme "t", sinon il ne peut pas être mis en œuvre.
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, comme document.getElementById('obj').style.className=”…” Faux ! Il ne peut être écrit que comme : document.getElementById('obj').className="..."
Change cssText
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 

document.getElementById('obj').style.backgroundColor=”#003366″
2. Changer globalement le style

Normalement, nous pouvons réaliser un changement de style de page Web en temps réel en modifiant la valeur href du style du lien externe, c'est-à-dire en "changeant le style du modèle". A ce moment, il faut d'abord donner un identifiant à la cible qui doit être modifiée, comme 

<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />
C'est très simple à appeler, comme


. 

<span on click="javascript:document.getElementById(&#39;css&#39;).href = &#39;ie.css&#39;">点我改变样式</span>
. Les nouveaux arrivants ne connaissent souvent pas CSS. Comment écrire des styles 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. Cela 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 méthodes pour appeler des feuilles de style dans les pages Web.
Première méthode : Création d'un 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. Un exemple est le suivant : 

<head> 
<title>文档标题</title> 
<link rel=stylesheet href="http://demo.css" type="text/css"> 
</link></head>
En XML, vous devez l'ajouter dans la zone de déclaration comme indiqué dans l'exemple suivant : 

< ? xml-stylesheet type="text/css" href="http://dhtmlet.css" ?>
Deuxième : Définir un objet bloc de style interne (Intégrer un bloc de style)

Vous pouvez insérer un objet bloc

entre les balises et dans votre document HTML. Pour les méthodes de définition, veuillez vous référer à la syntaxe de la feuille de style. Un exemple est le suivant : 

<html> 
<head> 
<title>文档标题</title> 
<style type="text/css"> 
<!-- 
body {font: 10pt "Arial"} 
h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon} 
h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue} 
p {font: 10pt/12pt "Arial"; color: black} 
--> 
</style> 
</head> 
<body> 
</body></html>
Veuillez noter que définir ici l'attribut type de l'objet de 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 la balise de l'objet pour définir les attributs de feuille de style qui s'y appliquent. Un exemple est le suivant : 

<p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁</p><p> </p>


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Exemple de code pour deux méthodes de fonction map dans jQueryArticle suivant：Exemple de code pour deux méthodes de fonction map dans jQuery

Articles Liés

Voir plus