jQuery - CSS


Met jQuery kunnen elementen worden voorzien van bepaalde opmaak wat zo af en toe best van pas kan komen. Hieronder enkele voorbeelden zoals het opgeven van een breedte, hoogte of een achtergrondkleur. Zoals hieronder in het voorbeeld op de laatste regel is te zien kan verschillende opmaak voor een element ook gecombineerd worden.

$(document).ready(function() {
        $(".element").css("float","left");
        $(".element").css("background-color","#FF6600");
        $(".element").css("border","1px solid #ccc");
        $(".element").css("text-align","center");
        $(".element").css("cursor","pointer");
        $(".element").css("width","75px").css("height","75px");
        $('.element').css({'height':(($(window).height())-60)+'px'});
});


Zo kan dit ook bijvoorbeeld op mouseover worden toegepast zoals hieronder in het voorbeeld. In dit geval wordt er dan een bepaalde breedte en hoogte opgeteld (50px) bij de originele breedte en hoogte (75px) van het betreffende element na mouseover.

$(document).ready(function() {
        $(".element").hover(function() {
                $(".element").css("width","+=50px").css("height","+=50px")
        },function() {
                $(".element").css("width","75px").css("height","75px");
        });
});


Of eventueel met een animatie.

$(document).ready(function() {
        $(".element").hover(function() {
                $(".element").animate({width:500}, "100");
        },function() {
                $(".element").animate({width:75}, "100");
        });
});