CSS avec JQuery

Cette page est propulsée par


Cette page Webjax vous présente les fonctionnalités JQuery qui vous permettent de travailler précisemment et efficacement avec les CSS.



#00 :: CSS: #01 :: Positionnement , Positioning: #02 :: Hauteur et Largeur , Height and Width:

00 :: CSS:

css( name )

Cette instruction l'attribut de style pour le premier élément matché.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

css( name )

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
$("#myTest00 div").click(function () { var color = $(this).css("background-color"); $("#myTest00 #result").html("Cette box 'span' est de couleur <span style="color:" + color + ";">" + color + "</span>."); });

css( properties )

Vous pouvez aussi utiliser cette instruction pour assigner un objet "key/value" "clé/valeur" en guise de "feuille de style CSS" pour un ou des élément(s).
La documentation officielle précise que cela est la meilleure méthode pour assigner massivement des styles CSS à des éléments matchés, sélectionnés.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

css( properties )

Tester le sélecteur :

JQuery c'est cool , passez au dessus de cette zone pour encore plus cool

Webjax c'est cool , passez au dessus de cette zone pour encore plus cool

Le code source de cet exemple est ci après présenté :
function demo01(){ $("#myTest01 p").hover(function () { $(this).css({ backgroundColor:"#F9BA1C", fontWeight:"bolder" }); }, function () { var cssObj = { backgroundColor: "#ddd", fontWeight: "", color: "#222222" } $(this).css(cssObj); }); }

css( name, value )

Vous pouvez enfin, utiliser cette instruction pour assigner un couple "key/value", "clé/valeur", le couple contenant un attribut de style et une valeur pour cet attribut.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

css( name, value )

Tester le sélecteur :

JQuery c'est cool , passez au dessus de cette zone pour encore plus cool

Webjax c'est cool , passez au dessus de cette zone pour encore plus cool

Le code source de cet exemple est ci après présenté :
$("#myTest02 p").mouseover(function () { $(this).css("color","red"); }); $("#myTest02 p").mouseout(function () { $(this).css("color","black"); });

01 :: Positionnement , Positioning:

offset( )

Cette instruction retourne l'offset du premier élément DOM matché. Les valeurs retournées sont entières, au nombre de 2 et correspondent à "top" et à "left". Cette instruction ne fonctionne que sur les éléments visibles.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

offset( )

Tester le sélecteur :

JQuery et Webjax c'est cool

Paragraphe qui va gicler

Le code source de cet exemple est ci après présenté :
var p = $("#myTest03 p:last"); var offset = p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top );

02 :: Hauteur et Largeur , Height and Width:

height( )

L'instruction retourne la valeur en pixels de la hauteur du premier élément matché.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

height( )

Tester le sélecteur :

Get Paragraph Height Get Document Height Get Window Height

paragraphe de test pour tester la hauteur

Le code source de cet exemple est ci après présenté :
function showHeight(ele, h) { $("#myTest04 div").text("La hauteur est de " + ele + " " + h + "px."); } $("#myTest04 #getp").click(function () { showHeight("paragraph", $("#myTest04 p").height()); }); $("#myTest04 #getd").click(function () { showHeight("document", $(document).height()); }); $("#myTest04 #getw").click(function () { showHeight("window", $(window).height()); });

height( val )

L'instruction peut aussi être utilisé pour "fixer" une valeur "height" CSS pour un élément ou des éléments.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

height( val )

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
$("#myTest05 div").one('click', function () { $(this).height(30) .css({cursor:"auto", backgroundColor:"#94FF28"}); });

width( )

Cette instruction retourne la valeur en pixels de la largeur du premier élément matché.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

width( )

Tester le sélecteur :

Afficher la largeur du paragraphe Afficher la largeur du document Afficher la largeur de la fenetre

JQuery et Webjax c'est cool.

Le code source de cet exemple est ci après présenté :
function showWidth(ele, w) { $("#myTest06 div").text("La largeur est " + ele + " " + w + "px."); } $("#myTest06 #getp").click(function () { showWidth("paragraph", $("#myTest06 p").width()); }); $("#myTest06 #getd").click(function () { showWidth("document", $(document).width()); }); $("#myTest06 #getw").click(function () { showWidth("window", $(window).width()); });

width( val )

Cette instruction peut aussi être utilisée pour "fixer" la largeur d'un ou d'un set d'éléments DOM.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

width( val )

Tester le sélecteur :

d

d

d

d

Le code source de cet exemple est ci après présenté :
$("#myTest07 div").one('click', function () { $(this).width(30) .css({cursor:"auto", "background-color":"#B1FF64"}); });

: 11/03/2008 22:05:32 | : JQuery, css, javascript, framework, ajax, library, jquery, j, query, Framework, Javascript, Library, Ajax, asyncronous, web2.0, ria, dom, control, enhancer,

Aucun commentaire enregistré