•  
     

Mudando seu Estilo - jQuery

E se quisermos ajustar os valores das propriedades individuais de CSS, jQuery faz isso ficar muito fácil!

Por redimensionar elementos ser uma prática muito comum, a jQuery tem funções específicas .height() e .width()que podem ser usadas para mudar a altura e a largura de elementos HTML. Por exemplo:

Código: Selecionar todos

    $("div").height("100px");
    $("div").width("50px");

faria com que todos os blocos <div> em uma página tivessem 100 pixels de altura e 50 pixels de largura.

A jQuery também inclui uma função de propósito geral .css() que recebe dois parâmetros de entrada: o primeiro é o elemento CSS a ser alterado, e o segundo é o valor a ele atribuído. Por exemplo:

Código: Selecionar todos

  $("div").css("background-color","#008800");

faria com que todos os blocos ` de uma página ficassem com o fundo verde. Você pode modificar qualquer atributo de um elemento CSS desse jeito.


HTML

Código: Selecionar todos

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div></div>
</body>
</html>


CSS

Código: Selecionar todos

div {
    height: 50px;
    width: 300px;
    border-radius:0;
    background-color: #2C7CC3;
}


JavaScript

Código: Selecionar todos

$(document).ready(function(){ 
$("div").width("200px").height("200px").css("border-radius","10px");
});


Demo: http://jsfiddle.net/0ma7nkkL/7/