动态调用样式表代码[转]

zoukankan html css js c++ java

动态调用样式表代码[转]

文章使用了多种动态调用样式表的方法。首先你可以学习到如何使用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>";
    }
这是一种简单的动态填充样式的方法。

（2）执行一个样式

你将知道在你的页面中的<HEAD>标签内执行一个样式或者一个样式表。

Listing 10

<head>
<style type="text/css">
    TD{}{color:Navy;
    border:10;
    border-color:green;
    border-style:solid;}
</style>
</head>

如果我用先前例子中的Javascript代码为样式表代码，将会发生什么？

Listing 11

script = @"<style type=""text/css"">TD{color:Navy;border:10;" +
  @"border-color:red;border-style:solid;}</style>";
Page.ClientScript.RegisterStartupScript(GetType(Page), "focus5", script);

应为ScriptManager要自动添加<javascript>标签到你的代码（在样式代码开始处加</script>），
你必须首先闭合<javascript>标签代码，（在样式代码后加<script>）
然后插入你的样式,再从新开始<javascript>标签代码。

Listing 12

script = @"<style type=""text/css"">TD{color:Navy;border:20;" +
            @"border-color:blue;border-style:solid;}</style>";
script2 = @"--></script>" + script + @"<script type=""text/javascript""></script>" & script & "<script type=""text/javascript""></script>" 'to end the javascript code

        script1 = script1 & vbCrLf & HttpContext.Current.Session("StijlScript")
        script1 = script1 & vbCrLf & "<script type=""text/javascript""><!--"
'执行它

  ScriptManager.RegisterClientScriptBlock(CType( _
  Page.FindControl("scriptManager1"), Object), _
  CType(Page.FindControl("scriptManager1"), Object).GetType, _
  "RefreshMap", script1, True)
'RefreshMap是唯一名字，如果你想要在最后提交这个script。
    End Sub
End Class

Result

页面是一个黄色背景，没有使用ScriptManager.RegisterClientScriptBlock.
我动态的改变成红色。在MyCode中的每一项将会重写我的CSS样式。如果你不使用一个项，将会使用默认的CSS样式。

原文地址

第一次翻译文章，有些地方可能翻译的不好请谅解。也能希望高手们指点下翻译不对的地方。

查看全文

相关阅读:
【转+补充】在OpenCV for Android 2.4.5中使用SURF(nonfree module)
Delphi StarOffice Framework Beta 1.0 发布
 Angular ngIf相关问题
 angularjs文档下载
 公众号微信支付开发
 公众号第三方平台开发教程六代公众号使用JS SDK说明
 公众号第三方平台开发教程五代公众号处理消息和事件
 公众号第三方平台开发教程四代公众号发起网页授权说明
 公众号第三方平台开发教程三微信公众号授权第三方平台
 公众号第三方平台开发教程二 component_verify_ticket和accessToken的获取

原文地址：https://www.cnblogs.com/ziyan22/p/1098904.html