如何用javascritp动态管理样式表

风声3 2008-01-23 01:54:58

比如
<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
求以上红色部分函数如何实现好？

...全文

118 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

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

打赏
举报

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>

littlelam 2008-01-23

打赏
举报



//ModifyCss和CreatCss可以一样的

function ModifyCss(name,value)

{

    document.write("\n<style>."+name+"{"+ value +";}</style>");

}

本项目是基于Vue框架开发的JavaScript企业级研发项目管理系统，包含2430个文件，主要文件类型包括Vue组件、JavaScript脚本、CSS样式表、HTML页面、PNG图片、SVG图形、JPG图片、GIF动画、SCSS样式表、Markdown文档和...

本项目是一个基于Vue和JavaScript开发的人力资源管理系统，包含99个文件，主要文件类型包括JavaScript脚本、Vue组件、SVG图形、SCSS样式表、YAML配置文件、Markdown文档、JSON配置文件、图片和编辑器配置文件。...

本养老院管理系统基于Springboot开发，包含308个文件，包括GIF动画、HTML页面、Java源代码、JavaScript脚本、CSS样式表、XML配置文件、LESS样式表、SCSS样式表、PNG图片和JSON配置文件。系统实现了管理员管理、用户...

本文件管理系统安卓端基于Javascript开发，包含1367个文件，包括JavaScript脚本、TypeScript源代码、Vue组件、CSS样式表、HTML页面、JSON配置文件、PNG图片、Markdown文档、MJS模块文件和SCSS样式表。系统实现了文件...

本宿舍管理系统基于Java和Javascript开发，包含766个文件，包括SVG图形、JavaScript脚本、Java源代码、GIF动画、CSS样式表、Vue组件、HTML页面、PNG图片、JPG图片、XML配置文件。系统实现了基于SSM的宿舍管理功能，...

JavaScript

87,921

社区成员

224,619

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章