Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Alexandre R

pegar propriedades css

Por , em Javascript

Recommended Posts

alissong    1

alissong
Postado

Alexandre R,

 

Tenho esse exemplo, acho que vai ajudá-lo:

1 - Exemplo6.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<script type="text/javascript" src="bibliotecaAjax.js"></script>

<script type="text/javascript" src="exemplo6.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Web Interativa com Ajax e PHP</title>

<link rel="stylesheet" type="text/css" href="estilosTimes.css">

</head>

<body>

<h2>Times</h2>

<form action="java script:void%200" onSubmit="obtemInfo(this.time[time.selectedIndex].value); return false">

<p>Escolha o time para ver as informações sobre ele.</p>

<p>

<select name="time" id="time">

<option value="gremio">Grêmio</option>

<option value="palmeiras">Palmeiras</option>

<option value="cruzeiro">Cruzeiro</option>

<option value="flamengo">Flamengo</option>

<option value="criciuma">Criciúma</option>

</select>

</p>

<p><input name="Exibir" type="submit" id="Exibir" value="Exibir informações">

</p>

</form>

<div id="saida"></div>

</body>

</html>

2 - exemplo6.js

var timeEscolhido;

 

function obtemInfo(time){

if(time) {

timeEscolhido = time;

var url="exemplo6.php?time="+time;

requisicaoHTTP("GET",url,true);

}

}

 

function trataDados(){

var info = ajax.responseText; // obtém a resposta como string

var div = document.getElementById("saida");

div.className = timeEscolhido;

div.innerHTML=info;

}

3 - exemplo6.php

<?php

$gmtDate = gmdate("D, d M Y H:i:s");

header("Expires: {$gmtDate} GMT");

header("Last-Modified: {$gmtDate} GMT");

header("Cache-Control: no-cache, must-revalidate");

header("Pragma: no-cache");

header("Content-Type: text/html; charset=ISO-8859-1");

 

// array de informações sobre os times

$times = array (

"gremio" => "Time de PORTO ALEGRE (RS)<br>Estádio: Olímpico",

"palmeiras" => "Time de SÃO PAULO (SP)<br>Estádio: Palestra Itália",

"cruzeiro" => "Time de BELO HORIZONTE (MG)<br>Estádio: Mineirão",

"flamengo" => "Time do RIO DE JANEIRO (RJ)<br>Estádio: Maracanã",

"criciuma" => "Time de Criciúma (SC)<br>Estádio: Heriberto Hulse"

);

 

$time = $_GET["time"];

if(isset($times[$time]))

echo $times[$time];

else

echo "Time não encontrado!";

?>

4 - estilosTimes.css

.gremio {

border: thin solid black;

padding: 5%;

font-size: 16pt;

color: #000000;

background-color: #00CCFF;

}

.palmeiras {

border: thin solid black;

padding: 5%;

font-size: 16pt;

color: #FFFFFF;

background-color: #008000;

}

.cruzeiro {

border: thin solid black;

padding: 5%;

font-size: 16pt;

color: #FFFFFF;

background-color: #003399;

}

.flamengo {

border: thin solid black;

padding: 5%;

font-size: 16pt;

color: #FFFFFF;

background-color: #FF0000;

}

.criciuma {

border: thin solid black;

padding: 5%;

font-size: 16pt;

color: #000000;

background-color: #FFFF00;

}

Esse exemplo tire de um livro do Juliano Niederauer - Ajax e PHP

Bom, como nada é perfeito o autor somente escolheu dos times chatos: palmeiras e flamengo, mas o glorioso cruzeiro está presente em tudo.

 

Opa! Pode ser assim támbem:

 

Function DefineEstilo(objeto)

objeto.padding="5%";

objeto.border="this solid black";

// e asssim por diante

}

 

Para chamar a função:

var div = document.getElementById("saida");

DefineEstilo(div.style_;

 

 

Um abraço.

 

 

Alissong

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito