方法一:利用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;
}
本文作者:网友 来源:网络
CIO之家 www.ciozj.com 微信公众号:imciow