动态样式

动态样式和昨天的动态脚本一样,都是一种动态引入外部样式(脚本的方式)

由于样式是由 link 元素引入的,所以动态样式自然也就是动态生成link元素插入文档的方式

不过和动态脚本不同的是,动态样式也就是link 只有插入到 head 中才能保持样式的一致性

代码如下:

var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "style.css"; // 引入名为 style的css文件
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);

不过在日常的使用中,通常我们并不会使用这种方式来修改页面的样式

这种方式存在的问题在于需要二次解析,这在一定程度上会影响性能

Javascript高级编程学习笔记(44)—— 动态样式的更多相关文章

  1. Javascript高级编程学习笔记(43)—— 动态脚本

    动态脚本 大多数情况下,DOM操作都很简洁明了 因为DOM主要就是用来操作页面中的可视节点的 但有些时候我们又希望可以动态的来进行DOM操作 其中的一部分也就是今天我们的内容动态脚本 动态脚本是什么意 ...

  2. Javascript高级编程学习笔记(51)—— DOM2和DOM3(3)操作样式表

    操作样式表 在JS中样式表用一种类型来表示,以便我们在JS对其进行操作 这一类型就是CSSStyleSheet 即CSS样式表类型,包括了之前 style 对象所不包括的外部样式表以及嵌入样式表 其中 ...

  3. Javascript高级编程学习笔记(50)—— DOM2和DOM3(2)样式

    样式 在HTML中定义元素的方式有以下三种: 1.link标签引入外部样式表 2.style标签定义嵌入样式 3.通过JS中对style特性定义元素样式(行内样式) “DOM2级样式”围绕上述样式机制 ...

  4. Javascript高级编程学习笔记(45)——DOM 操作表格及DOM动态集合

    操作DOM表格 早些时候,HTML 还是以表格布局为主, 所以DOM操作表格是比较重要的一点 但是现如今 有其它的选择,所以表格的操作也就慢慢地淡出了人们的视线 所以这里也就不过多去详细展开,这里也就 ...

  5. Javascript高级编程学习笔记(37)—— DOM(3)Element

    Element类型 除了Document类型之外,Element类型应该就是web编程中最常用的类型了 Element类型主要用于表现XML.HTML元素,提供对元素标签名.子节点以及特性的访问 特性 ...

  6. Javascript高级编程学习笔记(97)—— WebGL(3) WebGL上下文(1)

    WebGL上下文 在支持WebGL的浏览器中,WebGL的名字为 "experimental-webgl",这是由于 webgl 的规范仍未制定完成 制定完成后名字就会改为简单的 ...

  7. Javascript高级编程学习笔记(1)—— JS简介

    此系列文章,用于记录所学,如有错误欢迎指出. Javascript组成 1.核心(ECMAScript) 2.文档对象模型(DOM) 3.浏览器对象模型(BOM) 1.核心(ECMAScript) E ...

  8. Javascript高级编程学习笔记(75)—— 表单(3)表单字段

    表单字段 表单作为web应用中不可或缺的一部分,当然也是可以使用原生的 DOM 元素来访问的 除了标准的访问方式之外,每个表单都拥有一个 elements 属性,该属性保存着该表单所有 表单元素 的集 ...

  9. Javascript高级编程学习笔记(49)—— DOM2和DOM3(1)DOM变化

    DOM变化 我们知道DOM有许多的版本,其中DOM0和DOM2这两个级别以对事件的纳入标准而为人所知 但是呢,这里不讲事件,在后面会有专门和事件有关的部分作为详细讲解 这里就只讲一下DOM2和DOM3 ...

随机推荐

  1. .net core中的分布式缓存和负载均衡

    通过减少生成内容所需的工作,缓存可以显著提高应用的性能和可伸缩性,缓存对不经常更改的数据效果最佳,缓存生成的数据副本的返回速度可以比从原始源返回更快.ASP.NET Core 支持多种不同的缓存,最简 ...

  2. 实验五:任意输入10个int类型数据,排序输出,再找出素数

    一.程序编写 import java.util.*;public class Port {  public static void main(String[] args) {  // TODO 自动生 ...

  3. Zookeeper使用--命令行

    一.前言 在学习了Zookeeper相关的理论知识后,下面接着学习对Zookeeper的相关操作. 二.Zookeeper部署 Zookeeper的部署相对来说还是比较简单. Zookeeper有三种 ...

  4. Linux 学习笔记 3:Shell 基础

    1.Shell的工作原理 Shell是用户和操作系统之间的接口.当用户登录系统,有一个Shell进程随之启动,并在用户注销时终止.用户输入的命令是Shell输入. 处理命令的步骤:查找命令中的元字符: ...

  5. Leetcode - 517 Super Washing Machines

    今天开始定期记录本人在leetcode上刷题时遇到的有意思的题目.   517. Super Washing Machines   You have n super washing machines ...

  6. .NET core RSA帮助类

    解决 Operation is not supported on this platform 异常 直接上代码: public class RSAHelper { /// <summary> ...

  7. 数据统计 任务的一点感想 , sql 使用中的坑。

    需求: 多张表(个数不定,需求不是非常明确,只有一个大致需求)根据业务需求统计出一些数据 (按天统计,数据有多条校验规则)进行上传. 注意: 校验数据是否正确是需要第三放来反馈的,而且第三方的测试环境 ...

  8. css2d 3d

    2D转换 1.rotate()   旋转 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...

  9. list常用方法

    1.切片: ①.顾头不顾尾,从头开始取,但不包括最后一个. ②.从左向右数为正,从零开始,从右开始为负,从-1开始 如: names=['1','2','3'] ames[-1]与names[2]效果 ...

  10. mac mysql5.7.17修改root初始密码(知道初始密码)

    最近在mac上装个mysql可以说是麻烦死了,在这里就说说修改初始密码吧! 刚开始的时候不知道怎么修改,于是上网百度,网上几乎都是说要先执行命令mysqld_safe --skip-grant-tab ...