动态加载内容页的css样式表

来源:互联网 发布:随拍直播软件 编辑:程序博客网 时间:2024/05/28 05:16

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;
}

 

原创粉丝点击