Maison > interface Web > js tutoriel > Comment définir la couleur du dégradé en javascript

Comment définir la couleur du dégradé en javascript

醉折花枝作酒筹
Libérer: 2021-06-15 14:48:51
original
7382 Les gens l'ont consulté

En JavaScript, vous pouvez utiliser l'attribut d'objet style pour définir la couleur du dégradé. Le format de syntaxe est "element object.style.backgroundImage='linear-gradient(angle, color, color)" ; L'objet représente une déclaration de style distincte.

Comment définir la couleur du dégradé en javascript

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

En fait, la mise en place des dégradés est finalement contrôlée par css (style)

Tous les codes sont écrits directement en JS :

var test = document.getelementById(''test);
test .style.backgroundImage='linear-gradient(120deg, #155799, #159957)';
Copier après la connexion

PS : Le 'i' du backgroundImage ici doit être en majuscule et doit être écrit comme ceci. Il ne peut pas être écrit de la même manière que l'image d'arrière-plan en CSS, qui ne sera pas reconnue par JS.

Informations étendues :

Après l'avoir écrit en CSS, ajoutez une classe à l'élément via js pour ajouter un nouveau style :

Défini dans le feuille de style Style 

css :

.jianbian{
background-image: linear-gradient(120deg, #155799, #159957);
}
Copier après la connexion

Ajoutez ensuite une classe à l'élément via js

js:

var test = document.getelementById(''test);
test.className = 'jianbian' ;
Copier après la connexion

C'est tout, mais vous devez quand même considérer les différences Compatibilité du navigateur, comment écrire des dégradés.

-webket-/-moz- et autres

[Apprentissage recommandé : Tutoriel avancé javascript]

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal