zoukankan      html  css  js  c++  java
  • 动态加载css的两种实现思路(js和服务器端)

    动态加载css的实现思路,目前想到有两种:

    一、js

    参考http://blog.csdn.net/qsdnet/archive/2006/12/31/1470891.aspx

    主要内容如下:

    第一种:一般用在外部CSS文件中加载必须的文件

     程序代码
    @import url(style.css);
    /*只能用在CSS文件中或者style标签中*/


    第二种:简单的在页面中加载一个外部CSS文件

     程序代码
    document.createStyleSheet(cssFile);


    第三种:用createElement方法创建CSS的Link标签

     程序代码
    var head = document.getElementsByTagName('HEAD').item(0);
    var style = document.createElement('link');
    style.href = 'style.css';
    style.rel = 'stylesheet';
    style.type = 'text/css';
    head.appendChild(style);


    这里贴上我以前在项目中使用的几个函数,希望对大家有用!

     程序代码
    function loadJs(file){
        var scriptTag = document.getElementById('loadScript');
        var head = document.getElementsByTagName('head').item(0);
        if(scriptTag) head.removeChild(scriptTag);
        script = document.createElement('script');
        script.src = "../js/mi_"+file+".js";
        script.type = 'text/javascript';
        script.id = 'loadScript';
        head.appendChild(script);
    }

    function loadCss(file){
        var cssTag = document.getElementById('loadCss');
        var head = document.getElementsByTagName('head').item(0);
        if(cssTag) head.removeChild(cssTag);
        css = document.createElement('link');
        css.href = "../css/mi_"+file+".css";
        css.rel = 'stylesheet';
        css.type = 'text/css';
        css.id = 'loadCss';
        head.appendChild(css);
    }

    二、服务器端实现变量加载

    也在两种方法:

    (一)直接使用变量

    Code

     (二)使用link的runat="server"属性,使其变成服务器控件

     <link   id="myPageCssPath"   runat="server"   rel="stylesheet"   type="text/css"   /> 

     后台代码:

          
      
    protected   HtmlGenericControl   myPageCssPath;  
        
      myPageCssPath.Attributes[
    "href"]   =   ".";
    邀月注:本文版权由邀月和博客园共同所有,转载请注明出处。
    助人等于自助!  3w@live.cn
  • 相关阅读:
    布隆过滤器(Bloom Filter)
    什么是分布式账本
    什么是非对称加密?非对称加密算法介绍
    ANDROID DisplayManager 服务解析一
    ANDROID DisplayManager 服务解析一
    ANDROID DisplayManager 服务解析一
    ANDROID DisplayManager 服务解析一
    第1章 数据结构绪论
    第1章 数据结构绪论
    第1章 数据结构绪论
  • 原文地址:https://www.cnblogs.com/downmoon/p/1525516.html
Copyright © 2011-2022 走看看