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

最新推荐文章于 2021-06-15 23:03:09 发布

张广森

最新推荐文章于 2021-06-15 23:03:09 发布

阅读量4.3k

点赞数

分类专栏： ASP.NET 文章标签： css .net stylesheet xmlhttprequest object function

ASP.NET 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

方法一:利用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;
}

张广森

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
.net动态加载CSS样式表方法总结

方法一:利用Page类写入WebForm1 protected void Page_Load(object sender, EventArgs e){ Page.RegisterStartupScript("css",@"mycss.styleSheet.addImport('stylesheet1.css')");} 方法二
复制链接

扫一扫

专栏目录