Explication détaillée de la modification locale JavaScript et de la modification globale des exemples de style CSS-js tutoriel-php.cn

Explication détaillée de la modification locale JavaScript et de la modification globale des exemples de style CSS

伊谢尔伦

Libérer： 2017-07-21 14:59:34

original

2159 Les gens l'ont consulté

1. Changement partiel de style

Il existe trois types : changer de style direct, changer de nom de classe et changer de texte css. 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(&#39;obj&#39;).style.backgroundColor=”#003366″

Copier après la connexion

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 de lien externe, c'est-à-dire "en changeant le style de 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" />

Copier après la connexion

C'est très simple à appeler, comme

<span on click="javascript:document.getElementById(&#39;css&#39;).href = &#39;ie.css&#39;">点我改变样式</span>

Copier après la connexion

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, 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 façons d'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://www.ccvita.com/demo.css" type="text/css"> 
</link></head>

Copier après la connexion

Et 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://www.dhtmlet.com/dhtmlet.css" ?>

Copier après la connexion

Deuxième : définir un objet bloc de style interne (intégration d'un bloc de style)

Vous pouvez insérer un objet bloc entre le balisage et le 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>

Copier après la connexion

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 le balisage de l'objet pour définir les attributs de feuille de style qui s'y appliquent. Un exemple est le suivant :

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!