C# .NET

.net动态加载CSS样式表方法

位置:首页 > C# .NET > C# 提高,2013-11-21
要动态加载内容中的样式表,先要将link设置成服务器控件,并通过在后台动态绑定link标签的href,从而实现动态加载内容页的样式表方法一:利用Page类写入&
要动态加载内容中的样式表,先要将link设置成服务器控件,并通过在后台动态绑定link标签的href,从而实现动态加载内容页的样式表
  方法一:利用Page类写入

<head>

< title>WebForm1</title>

< link rel="stylesheet" type="text/css" href="" id="mycss">

< /head>



protected void Page_Load(object sender, EventArgs e)

{

Page.RegisterStartupScript("css",@"<script>mycss.styleSheet.addImport('stylesheet1.css')</script>");

}

 

方法二:利用占位符 asp:placeholder

< head>

< title>WebForm1</title>

< asp:placeholder id="myplaceholder" runat="server"></asp:placeholder>

< /head>

protected void Page_Load(object sender, EventArgs e)

{

System.Web.UI.Control a = Page.FindControl("myplaceholder");

System.Web.UI.HtmlControls.HtmlGenericControl objLink = new HtmlGenericControl("LINK");

objLink.Attributes.Add("rel","stylesheet");

objLink.Attributes.Add("type","text/css");

objLink.Attributes.Add("href","StyleSheet1.css");

objLink=objLink;

a.Controls.Add(objLink);

}

[注] asp:placeholder 这是控件是主要是起"占位符的做用"



方法三:转换为服务器控件

<head>

< title>WebForm1</title>

< link runat ="server" id="MyLink" href="StyleSheet1.css" rel="stylesheet" type="text/css" />

< /head>

protected void Page_Load(object sender, EventArgs e)

{

//动态更改css

MyLink.Href = "";//css链接

}



方法四:利用asp:Literal

< head>

< title>WebForm1</title>

< asp:Literal ID="Literal1" runat="server"></asp:Literal>

< /head>

protected void Page_Load(object sender, EventArgs e)

{

//动态更改css

Literal1.Text = "<link href='StyleSheet1.css' rel='stylesheet' type='text/css' />";

}

[住] asp:Literal可以将原句不变的输出

 

方法五:直接操作head内容

<head>

< title>WebForm1</title>

< link rel="stylesheet" type="text/css" href="" id="mycss">

< /head>

protected void Page_Load(object sender, EventArgs e)

{

System.Web.UI.HtmlControls.HtmlGenericControl child = new System.Web.UI.HtmlControls.HtmlGenericControl("link");

child.Attributes.Add("href", cssFilePath);

child.Attributes.Add("rel", "stylesheet");

child.Attributes.Add("type", "text/css");

Page handler = (Page)HttpContext.Current.Handler;

handler.Header.Controls.Clear();//清理

handler.Header.Controls.Add(child);

}



1. 第一种,使用HtmlLink加载



动态加载内容中的样式,先要将link设置成服务器控件,并通过在后台动态绑定link标签的href,从而实现动态加载内容页的样式

母版页:



//母版页中的href可写可不写,但要在link标签里面加上runat="server",并设置link的id以便在后台在能调用

内容页:

HtmlLink css = Master.FindControl("css") as HtmlLink;

css.Href = stylesheet;

//其中stylesheet是该内容页的样式的地址,是相对于根目录的地址。如根目录下的css文件夹里面的stylesheet.css,那么就要写上"css/stylesheet.css"。

或者:

HtmlLink link = new HtmlLink();

link.Attributes.Add("type", "text/css");

link.Attributes.Add("rel", "stylesheet");

link.Attributes.Add("href", "images/dg.css");

this.Page.Header.Controls.Add(link); 

2. 第二种,使用PlaceHolder加载







System.Web.UI.Control a = (PlaceHolder)Page.FindControl("myplaceholder");

System.Web.UI.HtmlControls.HtmlGenericControl objLink = new HtmlGenericControl("LINK");

objLink.Attributes.Add("rel","stylesheet");

objLink.Attributes.Add("type","text/css");

objLink.Attributes.Add("href","StyleSheet1.css");

objLink=objLink;

a.Controls.Add(objLink);



myplaceholder这是placeholder控件是主要是起"占位符的做用"

。把这一句话 objLink.Attributes.Add("href","StyleSheet1.css");

改成objLink.Attributes.Add("href",dropdownlist1.SelectedValue);



3. 第三种

首先来说如何动态加载一个外部的CSS文件:(假设文件名为style.css)

最没有技术含量的方法:

document.write("");

@import(style.css)

这种方法只能用在外部CSS文件或style结点中,基本上不能算作是动态。在FF和IE中均可行。

使用document.createStyleSheet()方法

这个方法是IE only的,参数可以传递一个样式中的值,如body{background: blue;}或者是一个外部CSS文件的URL,使用方法如document.createStyleSheet(style.css),此URL的地址相对于当前页面。

动态创建link结点

function LoadCss(cssUrl) {

var link = document.createElement("link");

link.rel = "stylesheet";

link.type = "text/css";

link.href = "cssUrl";

document.getElementsByTagName("body").item(0).appednChild(link);

}

这个方法在FF和IE中均可以使用,当然同样的思路还可以来创建style结点,然后使用XMLHttpRequest方法来加载cssURL中的内容,并把创建的style结点的innerHTML设置成XMLHttpRequest的responseText,但由于我认为这是最不经济、最不合理的一种方法,所以在这也就不讲了。

更新当前某个link结点

思路同上,但是这种作法是替换掉一个已有的link标签,可以用于更换网站的Theme,基本代码如下:

function ChangeTheme(cssUrl) {

var theme = document.getElementByName("theme"); //假设存在id为theme的结点

theme.href = cssUrl;

}

这种方法我测试过,在FF和IE中均可行。

动态创建样式元素

如果我想在网页上增加一个如下的CSS元素,应该怎么做呢?

.focus {

color: red;

font-style: bold;

}

当然,我可以创建一个style结点,然后把上面这段内容放到innerHTML中,那有没有别的办法呢?到目前为止,我还不知道除了上面那个方法以处一个在FF和IE中均可行的方法。不过在IE中我们可以这样做:

var sheet = document.createStyleSheet();

sheet.addRule(".focus", "color: red; font-style: bold;");



4.第四种,使用js实现



var css;

function include_css(css_file) {

var html_doc = document.getElementsByTagName('head')[0];

css = document.createElement('link');

css.setAttribute('rel', 'stylesheet');

css.setAttribute('type', 'text/css');

css.setAttribute('href', css_file);

html_doc.appendChild(css);





css.onreadystatechange = function () {

if (css.readyState == 'complete') {

include_css("css/index.css")

}

}

css.onload = function () {

include_css("css/index.css")

}

return false;

}

TAGS:.net动态加载CSS

猜你喜欢

NewHot手机版