对于styleSheet的修改,IE是可以直接操作的:
但是,根据DOM文档中对styleSheet的接口定义:
href属性是readonly的,因此FireFox等遵循标准模型的浏览器就只能取得而不能修改属性了。
为了满足动态地修改页面的shyleSheet的需求(比如:页面整体风格的动态替换等),只能通过别的途径来实现了。
我的方法其实很简单,用innerHTML就可以了:
1.将“link”定义在"span"中:
2.通过 innerHTML来修改整体的link内容:
对于IE,还是使用了直接修改的方法。
document.styleSheets[
1
].href
=
"
css/fontsize10.css
"
;
//
IE
但是,根据DOM文档中对styleSheet的接口定义:
//
Introduced in DOM Level 2:
interface StyleSheet {
readonly attribute DOMString type;
attribute boolean disabled;
readonly attribute Node ownerNode;
readonly attribute StyleSheet parentStyleSheet;
readonly attribute DOMString href;
readonly attribute DOMString title;
readonly attribute MediaList media;
} ;
interface StyleSheet {
readonly attribute DOMString type;
attribute boolean disabled;
readonly attribute Node ownerNode;
readonly attribute StyleSheet parentStyleSheet;
readonly attribute DOMString href;
readonly attribute DOMString title;
readonly attribute MediaList media;
} ;
为了满足动态地修改页面的shyleSheet的需求(比如:页面整体风格的动态替换等),只能通过别的途径来实现了。
我的方法其实很简单,用innerHTML就可以了:
1.将“link”定义在"span"中:
<
span id
=
"
globalCss
"
><
link rel
=
"
stylesheet
"
type
=
"
text/css
"
href
=
"
css/fontsize10.css
"
></
span
>
2.通过 innerHTML来修改整体的link内容:
function
changeCss(type)
{
var obj = document.getElementById("globalCss");
switch( type ) {
case "s":
obj.innerHTML = '<link type="text/css" rel="stylesheet" href="css/fontsize10.css">'; //FF,Opera
document.styleSheets[1].href = "css/fontsize10.css"; //IE
break;
case "m":
obj.innerHTML = '<link type="text/css" rel="stylesheet" href="css/fontsize14.css">';
document.styleSheets[1].href = "css/fontsize14.css";
break;
case "l":
obj.innerHTML = '<link type="text/css" rel="stylesheet" href="css/fontsize16.css">';
document.styleSheets[1].href = "css/fontsize16.css";
break;
}
}
var obj = document.getElementById("globalCss");
switch( type ) {
case "s":
obj.innerHTML = '<link type="text/css" rel="stylesheet" href="css/fontsize10.css">'; //FF,Opera
document.styleSheets[1].href = "css/fontsize10.css"; //IE
break;
case "m":
obj.innerHTML = '<link type="text/css" rel="stylesheet" href="css/fontsize14.css">';
document.styleSheets[1].href = "css/fontsize14.css";
break;
case "l":
obj.innerHTML = '<link type="text/css" rel="stylesheet" href="css/fontsize16.css">';
document.styleSheets[1].href = "css/fontsize16.css";
break;
}
}
对于IE,还是使用了直接修改的方法。