TADS:Desenvolvimento Web: codigos3001
De Wiki Cursos IFPR Foz
Este primeiro Código cria 3 Div's com características diferentes:
<html>
<head>
<style>
div{
width:150px;
height: 150px;
border: 1px solid #000000;
display: inline-block;
}
#prim{
background-color: #FF0000;
}
#seg{
background-color: #00FF00;
}
#terc{
background-color: #0000FF;
}
</style>
</head>
<body>
<div id="prim"></div>
<div id="seg"></div>
<div id="terc"></div>
</body>
</html>
Este código cria uma página parecida com o código anterior, porém adiciona as características de CSS via jQuery. Além disso, adiciona uma funcionalidade que ao clicar em qualquer um dos divs, estes trocam de cor.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(
function()
{
$("div").css("width","150px");
$("div").css("height","150px");
$("div").css("border", "1px solid #000000");
$("div").css("display", "inline-block");
$("#prim").css("background-color", "#FF0000");
$("#seg").css("background-color", "#00FF00");
$("#terc").css("background-color", "#0000FF");
$("div").click(
function()
{
alert($("#prim").css("background-color"));
var prim = $("#prim").css("background-color");
var seg = $("#seg").css("background-color");
var terc = $("#terc").css("background-color");
$("#prim").css("background-color", terc);
$("#seg").css("background-color", prim);
$("#terc").css("background-color", seg);
}
);
}
);
</script>
</head>
<body>
<div id="prim"></div>
<div id="seg"></div>
<div id="terc"></div>
</body>
</html>
Este último código cria outros 3 div's, porém com mais diferenças do que apenas cores. Logo, para poder trocar todas as propriedades do CSS, é utilizado o comando attr(), que altera um atributo do elemento selecionado. Também da para ver os comandos de removeClass() e addClass(), que consegue gerenciar a classe vinculada na tag.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").click(function(){
var c1 = $("#prim").attr("class");
var c2 = $("#seg").attr("class");
var c3 = $("#terc").attr("class");
$("#prim").attr("class" , c3);
$("#seg").attr("class" , c1);
$("#terc").attr("class" , c2);
/*alert( $("#prim").attr("class") );
$("#prim").removeClass("r"+aux);
$("#seg").removeClass("r"+aux+1);
$("#terc").removeClass("r"+aux+2);
$("#prim").addClass("r3");
$("#seg").addClass("r1");
$("#terc").addClass("r2");*/
});
});
</script>
<style>
.r1{
width: 50px;
height : 50px;
background-color: #FF0000;
}
.r2{
width: 100px;
height: 100px;
border: 1px solid #000000;
}
.r3{
width: 150px;
height: 150px;
background-color: #00FF00;
border: 1px solid #000000;
}
div{
display: inline-block;
}
</style>
</head>
<body>
<div id="prim" class="r1"></div>
<div id="seg" class="r2"></div>
<div id="terc" class="r3"></div>
</body>
</html>
