`
mutongwu
  • 浏览: 450403 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

DOM树添加script脚本和style样式

    博客分类:
  • DOM
阅读更多
添加javascript脚本:
如果要添加以下脚本到DOM文档页面中:
<script type="text/javascript">
	function sayHi(){
		alert("hi");
	}
</script>

运用DOM节点操作的知识,我们可能会这样写:
var script = document.createElement('script');
script.type = 'text/javascript';
script.appendChild(document.createTextNode('function sayHi(){alert("hi");}'));
document.body.appendChild(script);


    上述代码在除IE外的浏览器都可以正确运行,但是,对于IE来讲,script元素是比较特别的,因此不允许访问它的子节点。
修改后的代码如下:
       var script = document.createElement('script');
	script.type = 'text/javascript';
	var code = 'function sayHi(){alert("hi");}';
	try{
		script.appendChild(document.createTextNode(code));
	}catch(ex){
		script.text = code;//this works in all browers.
	}
	document.body.appendChild(script);


在文档添加css代码也有类似的情况:
<style type="text/css">
body {
	background-color: red;
}
</style>


实现的代码应该如下:
	var style = document.createElement('style');
	style.type = 'text/css';
        var cssText = "body{background-color:blue;}";
	try{
	   style.appendChild(document.createTextNode(cssText));
	} catch (ex){
	   style.styleSheet.cssText = cssText;//IE
	}
	var head = document.getElementsByTagName('head')[0];
	head.appendChild(style);



整理自<<Professional.JavaScript.for.Web.Developers.2nd.Edition>>
分享到:
评论

相关推荐

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part1.rar

     3.4.5 遍历和迭代DOM树   3.5 DOM HTML   3.5.1 DOM2 HTML 的HTMLDocument对象   3.5.2 DOM2 HTML 的HTMLElement对象   3.6 实例:将手工HTML代码转换为DOM代码   3.6.1 DOM生成工具的HTML文件  ...

    第23章 动态加载脚本和样式1

    在网页开发中,动态加载脚本和样式是提高性能和用户体验的重要策略。本章主要涵盖了三个关键知识点:元素位置的获取、动态脚本的加载以及动态样式的应用。 首先,让我们详细讨论一下元素位置的获取。在DOM(文档...

    JavaScript DOM编程艺术代码

    3. **属性和样式操作**:通过DOM,我们可以读写元素的属性,如`element.getAttribute()`和`element.setAttribute()`,以及设置CSS样式,如`element.style.property = value`。还可以通过`innerHTML`和`textContent`...

    弹出层的例子(含jquery.DOMWindow脚本)

    这里我们关注的是一个包含`jquery.DOMWindow`脚本的弹出层例子。`jQuery`是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互等任务。`DOMWindow`则是基于jQuery的一个插件,用于创建可定制的弹出...

    JavaScript基础和DOM API函数

    JavaScript DOM API(Document Object Model)允许我们操作HTML和XML文档的结构、内容和样式。以下是一些基本的DOM操作: 1. 获取元素:`document.getElementById("id")`,`document.querySelector("CSS selector")...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part3.rar

     3.4.5 遍历和迭代DOM树   3.5 DOM HTML   3.5.1 DOM2 HTML 的HTMLDocument对象   3.5.2 DOM2 HTML 的HTMLElement对象   3.6 实例:将手工HTML代码转换为DOM代码   3.6.1 DOM生成工具的HTML文件  ...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part2.rar

     3.4.5 遍历和迭代DOM树   3.5 DOM HTML   3.5.1 DOM2 HTML 的HTMLDocument对象   3.5.2 DOM2 HTML 的HTMLElement对象   3.6 实例:将手工HTML代码转换为DOM代码   3.6.1 DOM生成工具的HTML文件  ...

    滚动脚本 好看的不错

    使用`style="display:none"`可以使元素不显示在页面上,但仍然存在于DOM树中。这种方式常用于动态显示或隐藏某些内容。 ### 滚动脚本应用 1. **IFRAME标签**: ```html &lt;IFRAME style="WIDTH:600px;HEIGHT:156...

    jquery 获取dom固定元素 添加样式的简单实例

    DOM是文档对象模型(Document Object Model)的缩写,它是一种与平台和语言无关的接口,允许程序和脚本动态地访问和更新文档的内容、结构和样式。简单来说,DOM是页面文档的一个树形结构的表示形式,每个节点代表了...

    javascript经典特效---显示特殊节日脚本.rar

    总的来说,这个“显示特殊节日脚本”利用了JavaScript的日期处理、DOM操作、事件监听和样式控制等功能,为网页创造出一种与特殊节日相关的互动体验。通过深入理解这些核心概念和技术,开发者可以创造出更加丰富和...

    java script 编程艺术及源码

    JavaScript,作为一种广泛应用于Web开发的脚本语言,与DOM(Document Object Model)的结合是创建交互式网页的关键。本文将深入探讨JavaScript编程艺术及其在DOM操作中的应用,并结合提供的源码进行详细解析。 首先...

    DOM是什么意思.docx

    DOM的核心理念是将网页作为一个可编程的对象集合,使得开发者可以使用脚本语言,如JavaScript,来动态地更新、添加、删除或修改文档内容。 DOM将HTML或XML文档视为一个树形结构,每个部分都对应着一个特定的节点。...

    【ASP.NET编程知识】总结ASP.NET C#中经常用到的13个JS脚本代码.docx

    这些属性可以用来实现样式的改变、DOM操作等。 四、引入JS文件 在ASP.NET中,可以通过script标签引入JS文件,例如:&lt;script src="script.js"&gt;&lt;/script&gt;这可以将JS文件引入到HTML页面中。 五、点击按钮时相关栏位...

    HTML脚本大全常用Javascript特效代

    例如,`element.style.property = value`可以设置元素的样式属性,或者使用`getComputedStyle()`获取元素的实际计算样式。 五、动画效果 JavaScript可以通过定时器(setTimeout()和setInterval())实现动画效果。...

    Dom-manipulation-practice-simple-:这只是在学习如何使用外部JS文件来操作DOM,以及如何使用HTML中的script标签进行链接。

    在这个项目中,你可能会遇到添加新元素、删除元素、遍历DOM树、以及响应用户交互等多种场景,这些都是DOM操作的基本技巧。通过实践,你可以更深入地理解这些概念,并掌握在实际项目中如何运用它们。 总结一下,这个...

    JavaScript_DOM编程

    DOM(Document Object Model)即文档对象模型,它是HTML或XML文档的一种树状结构表示,允许程序和脚本动态地访问和更新文档的内容、结构和样式。以下是一些关键的DOM对象及其属性和方法。 ##### 1. `document`对象 ...

    网页常用的js脚本

    JavaScript,简称为JS,是一种广泛应用于网页开发的脚本语言,它主要负责处理网页的交互性和动态效果。在网页设计中,JavaScript 起到了至关重要的作用,它能够与用户进行实时互动,提升用户体验。以下是一些常见的...

    VBScript JavaScript Dhtml SQL WSH DOM XML CSS参考手册大全

    《VBScript JavaScript Dhtml SQL WSH DOM XML CSS参考手册大全》是IT领域的宝贵资源,它涵盖了Web开发中的多个核心技术,包括动态网页设计、脚本语言、数据库管理和网络通信。下面将详细阐述这些技术及其重要性。 ...

    javascript DOM总结

    JavaScript DOM(文档对象模型)是Web开发中的一个重要概念,它是一种标准,允许程序和脚本动态更新、添加、删除和改变HTML或XML文档的内容、结构和样式。DOM将整个网页视为一个树形结构,其中每个节点代表页面上的...

    web页面添加水印-自定义

    在网页上添加水印,主要通过操纵DOM元素(Document Object Model)和CSS样式来实现。首先,创建一个包含水印文本的DOM元素,然后将其放置在页面的适当位置,并应用相应的透明度和角度等CSS属性,以达到水印效果。 ...

Global site tag (gtag.js) - Google Analytics