有时会使用一些改变心情方面的想法,比如 JS 函数实现动态添加 CSS 样式表文件,这样就可以做到随机加载心情文件,需要的朋友可以了解下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
先给出函数。
- varaddSheet = function() {
- vardoc,
- cssCode;
- if (arguments.length == 1) {
- doc = document;
- cssCode = arguments[0]
- }
- elseif(arguments.length == 2) {
- doc = arguments[0];
- cssCode = arguments[1];
- } else {
- alert("addSheet函数最多接受两个参数!");
- }
- if (!+"v1") { //增加自动转换透明度功能,用户只需输入W3C的透明样式,它会自动转换成IE的透明滤镜
- vart = cssCode.match(/opacity:(d?.d+);/);
- if (t != null) {
- cssCode = cssCode.replace(t[0], "filter:alpha(opacity=" + parseFloat(t[1]) * 100 + ")")
- }
- }
- cssCode = cssCode + " "; //增加末尾的换行符,方便在firebug下的查看。
- varheadElement = doc.getElementsByTagName("head")[0];
- varstyleElements = headElement.getElementsByTagName("style");
- if (styleElements.length == 0) { //如果不存在style元素则创建
- if (doc.createStyleSheet) { //ie
- doc.createStyleSheet();
- } else {
- vartempStyleElement = doc.createElement('style'); //w3c
- tempStyleElement.setAttribute("type", "text/css");
- headElement.appendChild(tempStyleElement);
- }
- }
- varstyleElement = styleElements[0];
- varmedia = styleElement.getAttribute("media");
- if (media != null && !/screen/.test(media.toLowerCase())) {
- styleElement.setAttribute("media", "screen");
- }
- if (styleElement.styleSheet) { //ie
- styleElement.styleSheet.cssText += cssCode;
- }
- elseif(doc.getBoxObjectFor) {
- styleElement.innerhtml += cssCode; //火狐支持直接innerHTML添加样式表字串
- } else {
- styleElement.appendChild(doc.createTextNode(cssCode))
- }
- }
有时我们需要在. js 文件对文档动态引入一些 CSS 样式。对于一些短小的 CSS 代码来说,这好办,我们可以调用其 style 方法,如
- varddd=document.getElementById("ddd");
- ddd.style.border="1pxsolidred";
如果再长一点也无所谓:
- varddd=document.getElementById("ddd");
- ddd.style.cssText="border:1pxsolidred;color:#000;background:#444;float:left";
本人而言,我是喜欢后者。因为前者有严重的兼容问题。如 float 这个样式,在 IE 是 styleFloat,在火狐等 W3C 标准游览器是 cssFloat。而 cssText 则是通吃。
如果很长,我们可以动态导入一 CSS 文件。如
- functionaddSheetFile(path){
- varfileref=document.createElement("link")
- fileref.rel="stylesheet";
- fileref.type="text/css";
- fileref.href=path;
- fileref.media="screen";
- varheadobj=document.getElementsByTagName('head')[0];
- headobj.appendChild(fileref);
- }
这个函数在 IE 中有点累赘。我向来是支持哪个游览器就用哪个游览器的原生函数,直接使用二进制代码效率最高。
- varoStylesheet=document.createStyleSheet(sURL,iIndex);
createStyleSheet 带的两个参数都是可选的。 但如果我们的样式是某个页面独有的,而且只有管理员才能使用到,而且那部分页面是动态生成的,我们需要一开始就引入它吗?需要特意弄个文件来装载它吗?最好的方法让这些样式与动态脚本捆绑在一起。我这个函数就为此而开发的。 坦白说,它最开始是为富文本编辑器而开发的。大家都知道,富文本输入框最流行的做法是把要输入的内容放到 iframe 中,这就涉及到两种 document,一个主页面的 document,另一个是 iframe 的 document。iframe 的 document 又涉及到兼容问题。我们可以: variframe=document.createElement('iframe');// 生成用于编辑的 richtexteditor variframeDocument=iframe.contentDocument||iframe.contentWindow.document; …… 嘛,扯远了。总而言之,函数最开始的判定就是为这两种 document 而准备。如果没有涉及到 iframe,我们只传入一个参数就行了。最后一个参数永远是 CSS 字符串。 然后是动态生成 styleSheet 元素,把 CSS 字符串加入到此元素的问题。当然如果有现阶段的,当然就用现成的。DOM 元素越多对游览器的负担就越大。我们想到 document.styleSheets 方法。它返回一个集合,包含 style 元素与 link 元素,还涉及一兼容问题,如: 上面用 alert(document.styleSheets.length); 测试一下,IE 返回 6,W3C 游览器返回 5。因此,否决了它。而且我们只用到 style 元素,不使用外联。第二部分的判定就针对 head 中的 style 元素而言,没有就创建一个。然后我们把 CSS 字符串加在第一个 style 元素就行了。 接着我们要加把保险锁,因为当 media="print" 时,只在页面打印时,定义的效果才有效。为了防止第一个 style 元素的 media 值不是 screen,我们得改一改。 附上 media 的一些说明。 screen(缺省值),提交到计算机屏幕; print,输出到打印机; projection,提交到投影机; aural,扬声器; braille,提交到凸字触觉感知设备; tty,电传打字机 (使用固定的字体); tv,电视机; all,所有输出设备。 最后是如此添加的问题。分 IE,火狐与其他游览器三种。判定游览器也用各自的私有属性或方法。如 styleSheet 是 IE 独用的,getBoxObjectFor 是火狐独用的(当然你也可以使用 (/firefox/.test(navigator.userAgent.toLowerCase())),通常 DOM 操作是最耗时的,能用私有就用私有! 使用方法。
来源: