公告:本站提供编程开发方面的技术交流与分享,打造最佳教程网,希望能为您排忧解难!

JS教程javascript动态载入CSS样式的方法

javascript动态载入CSS样式的方法

更新时间:2013-05-10 01:03:43 |

1.对指定HTML NODE节点设置样式:

Element.style[样式名称] = 样式值

例如:要给ID=demo的元素背景颜色设置为红色

<div id="demo">演示DIV</div>

CSS写法为:<div style="background-color:red">演示DIV</div>

JS写法为:document.getElementById('demo').sytle.backgroundColor = 'red' ;

一般情况下CSS属性与JS属性的转化方式是小驼峰式命名法如:

CSS写法:font-size:14px;JS写法 Element.style.fontSize = '14px' ;

JAVSCRIPT中可以使用正则直接替换

1

cssText.replace(/\-(.)/g,function(a0,a1){

3     return a1.toUpperCase();

4});

5

需要注意:IE浏览器下对滤镜处理与W3C标准有区别

W3C写法:opacity:0.8

IE浏览器写法:filter:alpha(opacity=80)

对应的JS转化代码如下:

1

cssText.replace(/\*opacity\s*:\s*(\d?\.\d+)/gfunction(a0,a1){

3        return "filter:alpha(opacity=" + (parseFloat(a1)*100) + ")";

4 });

5

2.对全局HTML元素样式进行调整:

例如,要给所有的P标签内容加上绿色

CSS写法如下:

p{color:green;}

JS动态加载写法如下:

1

function addCssText(cssText){

3    var style = document.createElement("style");

4    (document.getElementsByTagName("head")[0] || document.body).appendChild(style);

    if(!-[1,]){

        style.styleSheet.cssText = cssText.replace(

7            /\s*opacity\s*:\s*(\d?\.\d+)/g,

            function($0,$1){

9                return "filter:alpha(opacity=" + (parseFloat($1)*100) + ")";

10            }

11        );

    }else{

13        style.appendChild(document.createTextNode(cssText)) ;

14    }

15};

16

17addCssText('p{color:green;}');

18

3.JS动态引入外部CSS样式:

CSS引入外部样式写法如下:

<link type="text/css" rel="stylesheet" href="http://www.goodxyx.com/public/css/css.css">

JAVSCRIPT写法如下:

1

function addCssLink(url) {

3    var link = document.createElement("link");

4    link.rel = "stylesheet";

5    link.type = "text/css";

6    link.href = url;

7    document.getElementsByTagName("head")[0].appendChild(link);

8};

9

10addCssLink('http://www.goodxyx.com/public/css/css.css');

11

参阅

正则替换replace用法

最佳教程网

最大的技术交流平台 www.goodxyx.com© CopyRight 2011-2013, All Rights Reserved

浙ICP备11033019号