Explication détaillée de la modification JavaScript du code de style CSS local et global-js tutoriel-php.cn

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

伊谢尔伦

Libérer： 2017-07-19 16:32:58

original

2579 Les gens l'ont consulté

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(&#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 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" />

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. 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>

Copier après la connexion

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" ?>

Copier après la connexion

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>

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 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>

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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