Apprenez comment ajouter / modifier et supprimer des classes CSS, la vole, avec jQuery.Trs pratique pour modifier les proprits de style de n'importe quel lment de la page web.Tout est dans le cours vidos ci-dessous.

jQLeadBrite("#leadplayer_video_element_536A8DC698696").leadplayer(false, "eyJnYSI6dHJ1ZSwib3ZlcmxheSI6ZmFsc2UsInBvd2VyZWRfYnkiOmZhbHNlLCJwb3dlcmVkX2J5X2xpbmsiOiJodHRwOlwvXC93d3cucHJvZ3JhbW1hdGlvbi1mYWNpbGUuY29tXC8iLCJjb2xvcjEiOiIjRjVCQjBDIiwiY29sb3IyIjoiIzE3OThDRCIsImNvbG9yMyI6IiNGNUJCMEMiLCJ0eHRfc3VibWl0IjoiUkVDRVZPSVIgISIsInR4dF9wbGF5IjoiTGVjdHVyZSIsInR4dF9lbWwiOiJSZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X25hbWUiOiJSZW5zZWlnbmV6IHZvdHJlIFByXHUwMGU5bm9tLi4uIiwidHh0X2ludmFsaWRfZW1sIjoiU1ZQLCByZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X2ludmFsaWRfbmFtZSI6IlNWUCwgcmVuc2VpZ25leiB2b3RyZSBQclx1MDBlOW5vbS4uLiIsImxwX3NvdXJjZSI6IldQIFBsdWdpbiAxLjQuMi4xIFVubGltaXRlZCIsImlkIjoiNTM2QThEQzY5ODY5NiIsIndpZHRoIjo5NDAsImhlaWdodCI6NTI5LCJ0aHVtYm5haWwiOiIiLCJ0aXRsZSI6IkNvbW1lbnQgbW9kaWZpZXIgbGUgc3R5bGUgQ1NTIGF2ZWMgbGUgRnJhbWV3b3JrIGpRdWVyeSIsImRlc2NyaXB0aW9uIjoiQ29tbWVudCBtb2RpZmllciBsZSBzdHlsZSBDU1MgYXZlYyBsZSBGcmFtZXdvcmsgalF1ZXJ5IiwiYXV0b3BsYXkiOmZhbHNlLCJzaG93X3RpbWVsaW5lIjp0cnVlLCJlbmFibGVfaGQiOnRydWUsIm9wdCI6ZmFsc2UsImN0YSI6eyJ0aW1lIjoiZW5kIiwiYnRleHQiOiJDbGlxdWV6IGljaSBwb3VyIFByb2ZpdGVyIGRlIGxhIFB1aXNzYW5jZSBkZXMgRnJhbWV3b3JrcyBqUXVlcnkgZXQgRG9qbyBkYW5zIHZvdHJlIERcdTAwZTl2ZWxvcHBlbWVudCAhIiwidXJsIjoiaHR0cDpcL1wvd3d3LnByb2dyYW1tYXRpb24tZmFjaWxlLmNvbVwvZm9ybWF0aW9uLWpxdWVyeS1kb2pvXC8iLCJhdXRvX2ZvbGxvdyI6ZmFsc2UsIm5ld193aW5kb3ciOmZhbHNlfSwieW0iOiJhMnQwUC11YWp6VSJ9");

Afficher le texte de la vido

Comment modifier le style CSS avec le Framework jQuery Bonjour tous et bienvenu surDveloppement Facile. Dans ce nouveau cours consacr jQuery, vous allez apprendre manipuler le style CSS, si vous avez fait attention dans les cours prcdents, il y a desexemples de code source, qui justement modifie le style CSS qui ajoute ou supprime certainesclasses CSS. L ensemble on va rentrer dans le dtail, pour que vous puissiez les utiliser votre tour, ces options-l de jQuery.Connaitre la valeur dun attribut Pour connatre la valeurdun attribut CSS vous faites $ p.CSS a va rcuprer la couleur du paragraphe, a vouspermet CSS, d'accder une proprit de style du premier lment trouv, cette mthode vavous renvoyer une chane de caractres string.Modifier les proprits de styles Ensuite vouspouvez modifier les proprits CSS, toujours $ p.CSS, vous mettez la proprit CSS, sa valeursspare par une virgule, si vous voulez modifier plusieurs proprits CSS, donc color rouge,background bleu, la notation proprit valeur, donc les valeurs suivant le vocabulaire que vousutilisez, spars par une virgule pour modifier les proprits de styles. Attention si la propritCSS contient un tiret comme par exemple background-color, celle-ci est place entre guillemet background-color , sinon vous pouvez tout attacher, jQuery comprend backgroundcolor tout

1 / 3

attach, en principe dans le code source que je vous fournis, j'enlve le tiret et je mets toutattach backgroundcolor cest beaucoup plus rapide crire. Cette mthode renvoiegalement un objet jQuery.Attribuer des proprits de style Ensuite vous pouvez attribuerdes proprits de style CSS cl valeurs, a modifie le style d'un lment donn comme je vouslai dit, $ p.css color red, a va affecter la couleur rouge la balise p, donc c'est la mme choseque ce que je vous ai montr comme exemple tout lheure.Modifier la taille dun lmentVous pouvez avec ces techniques-l, modifier la taille d'un lment ou rcuprer la taille d'unlment, $ p.height, a va vous retourner la hauteur d'un lment, par contre si vous mettez $p.height avec une valeur en pixels, en pourcentage, a va modifier la hauteur de l'lment,pareil avec .width, tout seul, a vous retourne la largeur exprime en pixels, si vous mettez.width avec une valeur, a modifie la largeur en pixels d'un paragraphe pour lexemple quevous avez sur cette vido. Vous pouvez accder tous types d'lments, et bien videmment,les modifier en renseignant la valeur, innerHeight a retourne la hauteur infrieure du premierlment trouv, innerWidth la largeur intrieure, outerHeigh la hauteur extrieure, outerWidth lalargeur extrieure.Modifier le positionnement dun lment Vous avez galement la positionpour rcuprer la position d'un lment, offset pour rcuprer la valeur top et left, dans laposition d'un lment relatif au document, ces deux mthodes renvoient un objet de type jQueryavec top et left, pour en dduire la position. Les mthodes scrollTop(valeur) et scrollLeft(valeur)a permet quand vous avez un contenu dfilant, d'accder directement, de faire un dcalage devotre contenu, daccder, si vous faites dfiler du texte, d'accder directement au texte quevous souhaitez, si vous avez des images les unes ct des autres, avec scrollLeft, d'accderdirectement l'image que vous dsirez, trs pratique ces mthodes de jQuery. ScrollTop amodifie le dcalage en pixels entre le bord suprieur du document et llment slectionn,scrollLeft cest au niveau horizontal que a va modifier le dcalage alors que scrollTop cest auniveau vertical. Dans l'exemple qui s'affiche lcran $ div.scrollLeft c'est pour modifier ledcalage horizontal, tout simplement, ces deux mthodes renvoies un objet jQuery. Je vousmontre un exemple de code source, alors ici, tout est comment, comme d'habitude, comme avous pouvez faire un copier-coller du code jQuery, donc l, div 1 identifie par div1, hop, onrcupre la proprit CSS, on rcupre la proprit CSS, et on rcupre la proprit CSS. Sivous regardez dans le code source, des div, menus, hauteur, largeur, 3 pixels solides, visibilit,la hauteur du div, l on rcupre la visibilit et la couleur du div, parce que ce que cest cequ'on a crit ici, ici on veut rcuprer background-color, la hauteur et la visibilit, toutsimplement. Ensuite over, on survole le texte, quest-ce quon survol ? .div_over elle est ici,cest le texte, et au moment o on survole le over, mouseover, on rajoute une couleur debackground, on la passe en italique, par contre quand la souris sen vas, on change lebakcground-color et le font size on les supprime, comme a, a revient la valeur prcdente,tout simplement. Qu'est-ce qu'il y a dautre ? a cest pour changer la position, il passe au-dessus, il passe en dessous, les divs, il y a un systme de profondeur, si vous avez fait dudveloppement flash avec ActionScript hop des profondeurs des lments, donc les uns surles autres, avec le div, les CSS cest exactement la mme chose et JavaScript, jQuery vouspermet de grer a trs facilement. En mouseover, on agrandit directement la div ds quonpasse au-dessus, aller au paragraphe scrollTo, on va directement au paragraphe, reset, onrevient tout en haut, l je vous ai montr dans cet exemple, vous avez beaucoup de chosespour manipuler encore plus les lments du document HTML, les balises CSS, modifier le styleCSS en direct, tlchargez le code source sous cette vido, mettez-le en pratique dans votresite HTML 5, si vous avez des questions posez-les sous ce cours vido et moi je vous dis trs

2 / 3

bientt sur Dveloppement Facile.

Tlchargez l'exemple jQuery

Retrouvez le code source comment pour modifier les proprits de style d'un lment HTML.

Downloads

Modifier le style CSS d'un lment HTML avec jQuery

Code source comment pour accder aux proprits CSS des lments d'une pageHTML. Il y a galement la version jquery-1.11.0.min.js.

Partagez vos implmentations jQuery

Profitez de la zone commentaires pour partager le code source jQuery de vos plus bellesralisations !Comment modifier le style CSS avec le Framework jQuery

Powered by TCPDF (www.tcpdf.org)

3 / 3

http://www.programmation-facile.com/wp-content/uploads/2014/05/10-manipuler-style-css-jquery.ziphttp://www.programmation-facile.com/wp-content/uploads/2014/05/10-manipuler-style-css-jquery.ziphttp://www.programmation-facile.com/modifier-style-css-framework-jquery/http://www.tcpdf.org