Comment pouvez-vous placer CSS en javascript?

"Feuille de style en cascade (CSS)"Est essentiel pour appliquer le style à la conception globale des documents et rendre une page Web attrayante et conviviale. Plus précisément, la place de CSS en JavaScript est très utile pour effectuer les fonctionnalités complexes en JavaScript, ainsi que pour rendre le site Web ou la page Web global attrayant et accessible.

Cet article discutera des exemples de liaison de CSS à JavaScript.

Comment pouvez-vous placer CSS en javascript?

CSS peut être placé dans JavaScript en obtenant l'élément de tête HTML, en créant un nouvel élément de lien et en définissant ses attributs pour accéder au fichier CSS particulier.

Consultez l'exemple fourni pour comprendre les concepts déclarés.

Exemple 1: Création d'un lien en JavaScript et l'ajout à l'en-tête à l'aide de CSS

Dans l'exemple suivant, obtenez l'élément de tête HTML en utilisant le «document.getElementsByTagName ()”Méthode qui inclura un élément dans le DOM (modèle d'objet de document) dynamiquement:

var htmlhead = document.getElementsByTagName ('Head') [0];

Maintenant, créez un nouvel élément de lien à l'aide du «document.CreateElement ()" méthode:

var linkcss = document.createElement ('link');

Après cela, définissez les attributs de l'élément de liaison créé pour relier le document actuel avec le document lié (CSS) en spécifiant le type de fichier et le nom de fichier comme suit:

linkcss.rel = 'Stylesheet';
linkcss.type = 'text / css';
linkcss.href = 'linkcss.CSS ';

Le "APPENDCHILD ()»La méthode ajoutera l'élément de liaison qui est spécifié comme son argument à la tête HTML:

htmlhead.APPENDCHILD (lien);

Dans l'étape ci-dessous, accédez à l'élément créé nommé «lien«Utilisation de l'attribut de classe:

Placer CSS en JavaScript

Enfin, appliquez le style CSS sur le cap supplémentaire.

Code CSS

.lien
Couleur bleue;
taille de police: 24px;
Texte-aligne: Centre;

Sortir

Dans la sortie ci-dessus, on peut observer que le style CSS est appliqué sur la rubrique spécifiée en accédant au lien créé en JavaScript.

Exemple 2: Création d'un lien en JavaScript et l'ajout pour Div à l'aide de CSS

Dans l'exemple suivant, répétez les étapes à débuts ci-dessus pour obtenir l'élément de tête HTML, créant un nouvel élément de lien, en attribuant les attributs pour l'élément de liaison créé et en ajoutant l'élément de liaison à la tête HTML:

var linkcss = document.createElement ('link');
linkcss.rel = 'Stylesheet';
linkcss.type = 'text / css';
linkcss.href = 'linkcss2.CSS '; document.getElementsByTagName ('Head') [0].APPENDCHILD (LINKCSS);

Ensuite, incluez un «div”Dans HTML et accédez au lien créé avec la valeur suivante à afficher sur le DOM:

Placer CSS en JavaScript

Enfin, implémentez le style CSS sur la div spécifiée en se référant à l'élément créé ".lien". Le style comprend la taille de la police de réglage, le poids de la police, la couleur, la couleur d'arrière-plan, le rembourrage et le texte-alignement:

Code CSS

.lien
taille de police: 24px;
Police-poids: Bold;
Couleur blanche;
Color en arrière-plan: vert;
rembourrage: 10px;
Texte-aligne: Centre;

Sortir

Nous avons expliqué la procédure de placement CSS en JavaScript.

Conclusion

CSS peut être placé dans JavaScript en obtenant la tête HTML, en créant un nouvel élément et en définissant les attributs pour lui, ce qui se traduit par la liaison du fichier CSS particulier et l'ajouter à la tête HTML afin d'être appliquée à l'en-tête ou à la div. Ce blog a démontré le concept de placer CSS en JavaScript à l'aide d'exemples.