轻松学习JavaScript二十六：DOM编程学习之动态添加JS脚本和CSS样式

最新推荐文章于 2022-05-20 22:43:51 发布
最新推荐文章于 2022-05-20 22:43:51 发布
阅读量884 收藏 1
点赞数
分类专栏： HTML+Javascript+CSS

转载自：http://blog.csdn.net/erlian1992/article/details/50413710

先来一贯使用的HTML文档代码：

[html]  view plain copy print ?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>DOM</title>  
  6. <script type="text/javascript">  
  7. window.onload=function(){  
  8.   
  9. }  
  10. </script>  
  11. </head>  
  12.   
  13. <body>  
  14. <div id="box" class="box1 box2 box3">div区域</div>  
  15. </body>  

       一动态加载外部JS文件

       要动态加载外部index.js文件的代码：

[javascript]  view plain copy print ?
  1. alert("I am JS file!");  

       动态加载外部JS文件的代码：

[javascript]  view plain copy print ?
  1. //动态加载外部JS文件  
  2. var flag=true; //设置true再加载  
  3. if(flag){  
  4.      loadScript("index.js");//加载的外部JS文件  
  5. };   
  6. function loadScript(url){   
  7.      var script=document.createElement("script");   
  8.      script.type="text/javascript";   
  9.      script.src=url;   
  10.      document.getElementsByTagName("head")[0].appendChild(script);   
  11. };   

       加载前的效果：


       加载后的效果：

       二动态加载JS代码

[javascript]  view plain copy print ?
  1. //动态加载JS代码  
  2. var flag=true; //设置true再加载  
  3. if(flag){   
  4.     var script=document.createElement("script");   
  5.     script.type="text/javascript";   
  6.     script.text ="alert('I am JS code!')";   
  7.     document.getElementsByTagName("head")[0].appendChild(script);   
  8. };   

       加载前的效果：


       加载后的效果：
       三动态加载外部CSS样式文件
[javascript]  view plain copy print ?
  1. var flag=true; //设置true再加载  
  2. if(flag){   
  3.    loadCss("style.css");   
  4. };   
  5. function loadCss(url){   
  6. var link=document.createElement("link");   
  7. link.type="text/css";   
  8. link.rel="stylesheet";   
  9. link.href=url;   
  10. document.getElementsByTagName("head")[0].appendChild(link);   
  11. };   
       添加前的效果：
       添加后的效果：
       四动态加载CSS样式
[javascript]  view plain copy print ?
  1. //动态加载CSS样式  
  2. var flag=true; //设置true再加载  
  3. if(flag){   
  4.     var style=document.createElement("style");   
  5.     style.type="text/css";   
  6.     document.getElementsByTagName("head")[0].appendChild(style);   
  7.     var sheet = document.styleSheets[0];   
  8.     insertRule(sheet,".box1","color:red",0);   
  9. };   
  10. //上一篇博文我们提到的插入到CSS样式规则列表的第一个位置  
  11. function insertRule(sheet,selectorText,cssText,position){   
  12.     // 判断非IE浏览器  
  13.     if(sheet.insertRule){    
  14.          sheet.insertRule(selectorText+"{"+cssText+"}",position);   
  15.     }  
  16.     //判断是否是IE浏览器  
  17.     else if(sheet.addRule){    
  18.          sheet.addRule(selectorText,cssText,position)   
  19.     }   
  20. };          
       添加前的效果：

       添加后的效果：



可能黑客
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在html界面中加入js代码,在html中嵌入js脚本
weixin_36467048的博客
05-31 2573
一、在html中嵌入js代码：在html文件里嵌入js代码主要有四种形式：第一种是通过标记，这种一般用来定义一些函数，放在body外；第二种是通过文件形式导入，由标记的src属性指定路径；第三种是放在由句柄的属性值指定；第四种是使用javascript:协议。(1)方法一：1、把js代码放在标记之间；如：functionsquare(x){returnx*x;}2、一个html文档可以包含多个标记...
JavaScript：DOM编程艺术（第2版）
08-24
《javascript dom编程艺术:第2版》讲述了javascript、dom 和html5 的基础知识，着重介绍dom 编程技术背后的思路和原则：平稳退化、渐进增强和以用户为中心等。这些概念对于任何前端web 开发工作都非常重要。本书将...
javascript,jquery动态添加dom元素，并设定css属性，点击事件
天步的博客
01-05 4060
$('>',{             alt:'hello img!',  //设置alt属性         title:'just for test',  //设置title属性         click:function(){  //绑定点击事件             alert("添加div元素!!!");           }       }).css({     
js中 动态插入html脚本
alenejinping的专栏
05-19 590
正确方法： var DivHtml ="<div id='fwbw' name='fwrb' className='active'>1223</div>"; $("#fwbxm").html(fwbxmDivHtml); 错误：都不起作用 $("#jyfwb").innerHtml= fwbxmDivHtml; $("#jyfwb").innerHTML= fwbxmDivHtml;
js练习6 --- DOM文本节点的操作、动态脚本、动态样式、操作表格
我的博客
05-20 242
js
动态载入/删除/更新外部 JavaScript/Css 文件的代码
12-10
动态载入 JavaScript/Csss 文件 传统加载外部JavaScript(*.js) 或者 Css(*.css)文件的方法是直接在<head>标签里面进行添加: 代码如下: <head> [removed][removed] <link rel=”stylesheet” type=”...
js-dom-learning:有关DOM脚本学习的演示
05-21
这只是一个有关js DOM学习的演示，其中涉及DOM Core，Html DOM和Css DOM。 通常，我们使用js框架（例如Jquery，Angular，Backbone，React等）来完成工作。 但是在这个演示中，我使用本地js与后端进行交互。 压缩代码
csscript:CSS 内联脚本运行器。 使用 javascript 模式定义 css 值
06-09
使用javascript直接通过 css 定义css值或 eval 脚本。 CSS Script是和jQuery 的扩展。 要使CSS 脚本工作，您应该在加载 DOMList 后加载它。 如果你想使用jQUery ，那么你必须在加载之前加载 。 句法 cssproperty: '...
ITDEV160-带脚本JavaScript网页编程：该课程教给学生如何构建通过客户端脚本与用户交互的网站。 HTML和CSS技术用于页面格式化使用jQuery进行JavaScript编程可用于创建交互式网页
02-03
ITDEV160使用脚本JavaScript进行Web编程 MATC 2018Spring 本课程教学生如何建立通过客户端脚本与用户交互的网站。 HTML和CSS技术用于页面格式设置使用jQuery进行JavaScript编程可创建交互式网页。 作业 作业1 基本...
node-v16.12.0-darwin-x64.tar.xz
最新发布
04-23
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
试用Dev Containers的示例项目-Go
04-23
计算机技术是指评价计算机系统的各种知识和技能的总称。它涵盖了计算机硬件、软件、网络和信息安全等方面。计算机技术的发展使我们能够进行高效的数据处理、信息存储和传输。现代计算机技术包括操作系统、数据库管理、编程语言、算法设计等。同时，人工智能、云计算和大数据等新兴技术也在不断推动计算机技术的进步。计算机技术的应用广泛，涵盖了各个领域，如商业、医疗、教育和娱乐等。随着计算机技术的不断革新，我们可以更加高效地实现预期自动化、标准化
NTsky新闻发布v1.0测试版(提供JavaBean).zip
04-23
### 内容概要： 《NTsky新闻发布v1.0测试版》是一款基于 Java 开发的新闻发布系统的测试版本，旨在为新闻机构和媒体提供一个简单易用的新闻发布平台。该系统具有基本的新闻发布和管理功能，包括新闻分类、新闻编辑、新闻发布等核心功能。此外，该版本还提供了 JavaBean，使开发人员能够方便地将系统集成到自己的项目中，快速实现新闻发布的功能。 ### 适用人群： 本测试版本适用于新闻机构、媒体从业者以及Java开发人员。如果你是一家新闻机构或媒体，希望拥有一个简单易用的新闻发布平台，方便快捷地发布和管理新闻，那么这个测试版本将为你提供一个初步的体验。同时，如果你是一名Java开发人员，希望学习和掌握新闻发布系统的开发技术，并且对新闻行业有一定的了解，那么通过这个测试版本，你可以获取到一些JavaBean，并且可以参考系统的设计和实现，为你的项目开发提供参考和借鉴。无论是从业务需求还是技术学习的角度，该测试版本都将为你提供一定的帮助和支持。
JavaScript介绍.zip
04-23
javascript，JavaScript 最初由 Netscape 公司的 Brendan Eich 在 1995 年开发，用于 Netscape Navigator 浏览器。随着时间的推移，JavaScript 成为了网页开发中不可或缺的一部分，并且其应用范围已经远远超出了浏览器，成为了全栈开发的重要工具。
15-21.php
04-23
15-21.php
汽车租赁系统（毕业设计）
04-23
汽车租赁系统后端采用了spring，spring mvc，mybatis框架，前端使用了layui，界面美观。 包含功能：客户管理，车辆管理，出租，出租单管理，汽车入库，检查单管理，菜单管理，用户管理，角色管理，日志管理，统计分析等。 该毕业设计功能涵盖了大部分汽车租赁中的业务需求，特点是业务功能较多，有助于学生加深业务到技术的理解。
设计模式_行为型_访问者模式.md
04-23
设计模式_行为型_访问者模式
HTML25-创意网站产品主页模板官网落地页APP主页产品宣传页源码 landing静态页面.zip
04-23
HTML25-创意网站产品主页模板官网落地页APP主页产品宣传页源码 landing静态页面
快手弹幕采集学习源码！！
04-23
快手弹幕采集学习源码
html js css javascript和vue
05-18
- JavaScript是一种广泛使用的脚本语言，用于为网页添加动态交互效果，包括响应用户操作、处理表单数据和操作DOM元素等。 - Vue.js是一种流行的JavaScript框架，用于构建单页面应用程序（SPA）和复杂的Web用户界面。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值