87,984
社区成员
发帖
与我相关
我的任务
分享如何用javascritp动态管理样式表
比如
<script type="text/javascript">
CreatCss(); // 创建样式style_01
document.write("<p class='style_01'>测试文字A</p>");
AppendCss(); // 创建样式style_02
document.write("<p class='style_02'>测试文字B</p>");
// 甚至修改style_01
ModifyCss("style_01","font-size:12px");
</script
求以上红色部分函数如何实现好？
<script type="text/javascript">
CreatCss(); // 创建样式style_01
document.write("<p class='style_01'>测试文字A</p>");
AppendCss(); // 创建样式style_02
document.write("<p class='style_02'>测试文字B</p>");
// 甚至修改style_01
ModifyCss("style_01","font-size:12px");
</script
求以上红色部分函数如何实现好？
...全文
请发表友善的回复…
发表回复
LutzMark 2008-01-23
- 打赏
- 举报
最后一行错了
<script language="javascript">test()</script>
LutzMark 2008-01-23
- 打赏
- 举报
<script language="javascript">
function test()
{
//判断浏览器 IE
if (typeof ActiveXObject != "undefined")
{
CreatCss(); // 创建样式style_01
document.write(" <p class='style_01'> 测试文字A </p> ");
}
//判断浏览器 FireFox
else if (window.XMLHttpRequest)
{
AppendCss(); // 创建样式style_02
document.write(" <p class='style_02'> 测试文字B </p> ");
// 甚至修改style_01
ModifyCss("style_01","font-size:12px");
}
}
<script language="javascript">DoCallTimer()</script>
TNT_1st_excellence 2008-01-23
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>未命名頁面</title>
<script type="text/javascript" language="javascript">
<!--
function CreateCss()
{
var style = '';
style += '<style type="text/css" id="style1">';
style += '.style_01 {background-color:blue;}';
style += '</style>';
document.write(style);
}
function AppendCss()
{
var style = '';
style += '<style type="text/css" id="style2">';
style += '.style_02 {background-color:yellow;}';
style += '</style>';
document.write(style);
}
function ModifyCss()
{
var styleSheet = document.styleSheets.item("style1");
var style = styleSheet.rules.item("style_01");
style.style.fontSize = "12px";
}
CreateCss();
document.write('<p class="style_01">測試文字A</p>');
AppendCss();
document.write('<p class="style_02">測試文字B</p>');
ModifyCss();
//-->
</script>
</head>
<body>
</body>
</html>
TNT_1st_excellence 2008-01-23
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>未命名頁面</title>
<script type="text/javascript" language="javascript">
<!--
function CreateCss()
{
var style = '';
style += '<style type="text/css" id="style1">';
style += '.style_01 {background-color:blue;}';
style += '</style>';
document.body.innerHTML += style;
}
function AppendCss()
{
var style = '';
style += '<style type="text/css" id="style2">';
style += '.style_02 {background-color:yellow;}';
style += '</style>';
document.body.innerHTML += style;
}
function ModifyCss()
{
var styleSheet = document.styleSheets.item("style1");
var style = styleSheet.rules.item("style_01");
style.style.fontSize = "12px";
}
//-->
</script>
</head>
<body>
<p id="p1">測試文字A</p>
<p id="p2">測試文字B</p>
<script type="text/javascript" language="javascript">
<!--
CreateCss();
document.getElementById('p1').className = "style_01";
AppendCss();
document.getElementById('p2').className = 'style_02';
ModifyCss();
//-->
</script>
</body>
</html>
littlelam 2008-01-23
- 打赏
- 举报
<style type="text/css">
a,div,p {color:red}
h5 {color:blue}
</style>
<script>
if(document.styleSheets[0].cssRules){
alert(document.styleSheets[0].cssRules[1].selectorText+":"+document.styleSheets[0].cssRules[1].style.cssText)
}else{
alert(document.styleSheets[0].rules[1].selectorText+":"+document.styleSheets[0].rules[1].style.cssText)
}
</script>
btbtd 2008-01-23
- 打赏
- 举报
<script type="text/javascript">
CreatCss(); // 创建样式style_01
AppendCss(); // 创建样式style_02
ModifyCss("style_01","font-size:12px");
</script
<script type="text/javascript">
document.write(" <p class='style_01'> 测试文字A </p> ");
document.write(" <p class='style_02'> 测试文字B </p> ");
</script
CreatCss(); // 创建样式style_01
AppendCss(); // 创建样式style_02
ModifyCss("style_01","font-size:12px");
</script
<script type="text/javascript">
document.write(" <p class='style_01'> 测试文字A </p> ");
document.write(" <p class='style_02'> 测试文字B </p> ");
</script
myvicy 2008-01-23
- 打赏
- 举报
比如
<script type="text/javascript">
creatCss = function(){document.write("<style>.style_01{color:red;}</style>")}
AppendCss = function(){document.write("<style>.style_02{color:red;}</style>")}
ModifyCss = function(){
//
document.styleSheets[0].rules[0].style.font-size="12px" ;
}
CreatCss(); // 创建样式style_01
document.write(" <p class='style_01'> 测试文字A </p> ");
AppendCss(); // 创建样式style_02
document.write(" <p class='style_02'> 测试文字B </p> ");
// 甚至修改style_01
ModifyCss("style_01","font-size:12px");
</script>
<script type="text/javascript">
creatCss = function(){document.write("<style>.style_01{color:red;}</style>")}
AppendCss = function(){document.write("<style>.style_02{color:red;}</style>")}
ModifyCss = function(){
//
document.styleSheets[0].rules[0].style.font-size="12px" ;
}
CreatCss(); // 创建样式style_01
document.write(" <p class='style_01'> 测试文字A </p> ");
AppendCss(); // 创建样式style_02
document.write(" <p class='style_02'> 测试文字B </p> ");
// 甚至修改style_01
ModifyCss("style_01","font-size:12px");
</script>
littlelam 2008-01-23
- 打赏
- 举报
//ModifyCss和CreatCss可以一样的
function ModifyCss(name,value)
{
document.write("\n<style>."+name+"{"+ value +";}</style>");
}
