JavaScript DOM操作技术---动态脚本和动态样式

超、凢脫俗 2023-02-11 13:26 16阅读 0赞

## 动态脚本 ##

创建动态脚本有两种方式。

1、引入外部文件

<script type="text/javascript" src="aqing.js" ></script>

2、直接插入JavaScript代码

function loadScript(url) { 
                    var script = document.createElement("script");
                    script.type = "text/javascript";
                    script.src = url;
                    document.body.appendChild(script);
                }
    
                loadScript("aqing.js");

--------------------

## **动态样式** ##

能够把CSS样式包含到HTML页面中的元素有两个。其中，<link>元素用于包含来自外部的文件，而<style>元素用于指定嵌入样式。与动态脚本类似。所谓动态样式是指在页面刚加载时不存在的样式；动态样式是页面加载完成后动态添加到页面中的。

1、插入外部文件

<link rel="stylesheet" type="text/css" href="style.css">

2、直接插入JavaScript代码

function loadStyleString(css) { 
                    var style = document.createElement("style")
                    style.type = "text/css";
                    try { 
                        style.appendChild(document.createTextNode(css));
                    } catch (ex) { 
                        style.styleSheet.cssText = css;
                    }
                    var head = document.getElementsByTagName("head")[0];
                    head.appendChild(style);
                }
    
                loadStyleString("body{background-color:red}");

愿你的坚持终有收获。

[个人博客网站 没事可以来逛逛https://aqingya.cn][_https_aqingya.cn]

[_https_aqingya.cn]: https://aqingya.cn

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript 动态表格操作

阅读目录 JavaScript 动态创建表格第一种示例第二种示例示例解析表格相关的属性和方法 1.

痛定思痛。/ 2023年10月06日 22:23/ 0 赞/ 148 阅读

相关 JavaScript--DOM操作表格及样式(21)

1 // 使用DOM来创建表格; 2 var table = document.createElement('table'); 3

╰半夏微凉°/ 2023年08月17日 17:19/ 0 赞/ 190 阅读

相关 JavaScript DOM操作技术---动态脚本和动态样式

动态脚本创建动态脚本有两种方式。 1、引入外部文件 <script type="text/javascript" src="aqing.js" ></scr

超、凢脫俗/ 2023年02月11日 13:26/ 0 赞/ 17 阅读

相关【JavaScript】DOM之样式操作

样式操作获取内联样式以节点和元素的方法来获取指定的CSS样式 <body> <div id="q1" style="width: 200px;he

小灰灰/ 2023年01月23日 11:58/ 0 赞/ 103 阅读

相关 javaScript DOM操作技术

在一般情况下我们操作DOM都比较简单明了，尤其是jquery出来之后，我们会发现操作DOM变得如此简单，但是也会有许多隐藏的坑，所以有时候操作DOM也并非想象中那么简单；简

小灰灰/ 2022年09月21日 05:32/ 0 赞/ 351 阅读

相关【JavaScript】动态加载脚本和样式

一、动态加载脚本当网站需求变大，脚本的需求也逐步变大。我们就不得不引入太多的 JS 脚本而降低了整站的性能，所以就出现了动态脚本的概念，在适时的时候加载相

╰+哭是因爲堅強的太久メ/ 2022年07月16日 01:11/ 0 赞/ 308 阅读

相关 JavaScript实战-DOM操作之动态添加tr、td

JavaScript实战-DOM操作之动态添加tr、td 全部代码如下： ![这里写图片描述][SouthEast] ![这里写图片描述][SouthEast 1]

曾经终败给现在/ 2022年06月11日 03:56/ 0 赞/ 325 阅读

相关 javascript 动态修改css样式方法+JQuery中操作Css样式的方法

JS 显示/隐藏 var img=document.getElementsByName("img"); function onclick

桃扇骨/ 2022年06月09日 09:10/ 0 赞/ 451 阅读

相关 Javascript（六）javascript动态修改html的CSS样式

之前使用js修改html的属性达到一种交互的效果，事实上，使用js修改html的css样式可以实现一种更加绚丽的交互效果。要修改html的样式有两种方式，一种是修改styl

一时失言乱红尘/ 2022年05月17日 03:07/ 0 赞/ 930 阅读

相关动态增加元素的DOM操作

动态的增加和删除元素在很多地方都需要用到，比如有时候需要大量数据收集的时候，我们就需要动态增加form表单等。下面是一个例子：效果演示 <table> 动态添加用户

痛定思痛。/ 2021年12月17日 15:27/ 0 赞/ 338 阅读