Alterando CSS em runtime

<< Click to Display Table of Contents >>

Navigation:  ASP.NET > Dicas avançadas >

Alterando CSS em runtime

Previous pageReturn to chapter overviewNext page

Imagine alterar as propriedades CSS de um componentes (como o div) em runtime...

 

estilo.css

 

.vermelho

{

  width: 200px;

  margin: 0 auto;

  text-align: left;

  float: left;

  border: 1px solid red;

}

 

.azul

{

  width: 400px;

  margin: 10 auto;

  text-align: left;

  float: left;

  border: 2px solid blue;

}

 

Default.aspx

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

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

</head>

<body>

    <form id="form1" runat="server">

    // o segredo é colocar runat server e dizer um nome de classe para div

    <div id="conteudo" runat="server" class="conteudo">

        Teste de conteúdo

    </div>

    </form>

</body>

</html>

 

Default.aspx.cs

 

  protected void Page_Load(object sender, EventArgs e)

   {

      // se tiver um querystring a com qualquer valor usa a borda azul

      if (Request.QueryString["a"] != null)

           conteudo.Attributes["class"] = "azul";

      else

           conteudo.Attributes["class"] = "vermelho";

   }