Dimensões e Posição

Na documentação da jQuery, existe diversas funções para manipulação das folhas de estilo. Existe funções para trabalhar com largura, altura, saber se tem ou não uma classe vinculada a um determinado elemento. Pode-se também verificar se existe uma propriedade específica do css. CSS

Manipulação CSS

• css();

Avaliando uma imagem

Primeiro localizar o elemento, nesse caso uma tag img, depois .css. Veja: $("img").css através dessa função recupera-se qualquer propriedade css, sendo uma delas a largura. Atribuir valores css a um elemento é feito através desta função também.

No javaScript:
$(document).ready(function(){
   $("span").click(function(){
	  alert($("img").css("width"));
	 Obs: para a altura, colocar height no lugar de width
	 });
 });
	 Resultado: 214px valor obtido do arquivo da imagem

Atribuíndo Valores à Imagem

No exemplo abaixo a imagem será alterada no próprio elemento, a partir das propriedades css que ele possui.

No javaScript:
 $(document).ready(function(){
   $("span").click(function(){
      $("img").css({
	       width: "290px",
		   background:"00FF00",
		   border:"20px solid beige",
	   });
     });
 });
 

Identificando a Classe

• hasClass(); (Verifica a existência de uma classe.)

No javaScript:
  $(document).ready(function(){
      $("span").click(function(){
      alert(S("img").hasClass("imagem"));
      });
 });
 Obs: Não funcionou

• removeClass(); (Remove um estilo do elemento.)

No javaScript:
   $(document).ready(function(){
       $("span").click(function(){
       alert(S("img").hasClass("imagem"));
       S("img").removeClass("imagem")
       });
 });
 Obs: Não funcionou

Adicionando uma Classe

• addClass(); (Adiciona uma classe css a um elemento.)

Posicionamento

• offset();
• position();

No javaScript:
 $(document).ready(function(){
    $("span").click(function(){
      S("img").addClass("destaque");
    //POSITION
   alert($("img").position().top);
   alert($("img").position().left);
   alert($("img").offset().top);
   alert($("img").offset().left);
   });
});
Obs: Não funcionou

Dimensões

• Width();
• height();
• .innerHeight()
• .innerWidth()
• .outerHeight()
• .outerWidth()

No javaScript:
   $(document).ready(function(){
    $("span").click(function(){
      S("img").addClass("destaque");
	  
   Lembrete: Para altura, trocar a palavra Width por Height.
  alert($("img").width());
  alert($("img").innerWidth());
  alert($("img").outerWidth(true)); //imagem, padding e a borda.
    });
});
Obs: Não funcionou