使用javascript动态调用样式表代码

悟静 2013-03-02

展开全文

文章使用了多种动态调用样式表的方法。首先你可以学习到如何使用JavaScript代码来动态调用的方法，
然后我们会探索如何从数据库中读取样式表代码。文章还提供了一些技巧来进一步提高样式表代码。
还提供了一个完整的示例程序和有关源码。

说明
许多的人都想实现在用户登陆后的页面拥有自己的样式。我的做法是：首先我在数据库中存储了许多的样式代码，然后将他们拷贝、粘贴到内容的样式表中。然后我从数据库中读取出数据，讲数据赋值给变量，插入到我的动态页面中。

（1）动态调用JavaScript代码。
动态调用JavaScript代码有两种有效方法。

Listing 1
Page.ClientScript.RegisterStartupScript(GetType(Page), "item1", script)

Listing 2
ScriptManager.RegisterClientScriptBlock(Page, GetType(Page), "item1", script, True)

如果你创建的是AJAX enabled website或者使用了ScriptManager时，使用该方法。

Listing 3
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

两种方法不同的是，第一种方法是将Script代码输出到页面的最下面。第二种方法是讲代码输出到<BODY>标签后面。
第二种不同的是，第一种方法是必须在代码中增加一个<script>标签，第二种方法会自动为你添加标签。

假设我的代码就像下面这样。

Listing 4

protected void Page_Load(object sender, EventArgs e)
{
string script = "";
if(!IsPostBack)
{
script = @"<script type='text/javascript'></script>";
Page.ClientScript.RegisterStartupScript(GetType(Page), "focus4", script);

script = @"alert('Alert message one');";
ScriptManager.RegisterClientScriptBlock(Page, GetType(Page), "item11", script, True)
}
}

然后我们有两个文本框；第一个消息框显示"alert message one"，虽然它第二个调用。
并且我们把第二个文本框显示为"Alert message two"。
你可能会把你的提示信息硬编码在页面的<BODY>内。

Listing 5

<script type="text/javascript">

</script>
这个消息将会显示在第一个方法和第二个方法的中间。并且这个消息框将使用该代码在页面加载的时候弹出来。

Listing 6

Page.ClientScript.RegisterStartupScript

这个方法调用的消息框执行页面加载后，在Listing 7 之前弹出。

Listing 7

ScriptManager.RegisterClientScriptBlock

第三种执行动态执行你的代码的方式是这样。

Listing 8
<head>
<title><% =titelpage%></title>
<% =MyNewStyle%>
</head>
该代码是在页面中必须填充变量MyNewStyle。

Listing 9

protected string MyNewStyle = "";
protected string titlepagina = "";
protected void Page_Load(object sender, EventArgs e)
{
titelpagina = "new title";
MyNewStyle = @"<style type='text/css'>TD{color:orange;border:1;" +
@"border-color:black;border-style:solid;}</style>";
}

这是一种简单的动态填充样式的方法。