动态样式

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

由于样式是由 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. SQL CTE递归

    WITH cte_name AS ( --Anchor member is defined ' UNION ALL --Recursive member is defined referencing ...

  2. class 关键字

    class Ninja 表示创建一个名为Ninja的函数.constructor(...)指明Ninja函数的签名和函数体内容. class Ninja{ constructor(name){ thi ...

  3. 【aardio】]SQL创建、读写 excel

    import access; var db,err = access( "/test.xls" ) //文件不存在可自动创建 //创建表 if( ! db.existsTable( ...

  4. LCA的两种写法

    第一种是离线的Tarjan算法 #include<cstdio> using namespace std; int rd(){ ,fl=;char ch=getchar(); ;}ch=g ...

  5. LINUX日常操作二

    参见:Linux日常操作一  selinux 开启和关闭 一.查看SELinux状态:1./usr/sbin/sestatus -v      ##如果SELinux status参数为enabled ...

  6. 一次HTTP请求响应涉及了哪些?

    HTTP请求和响应步骤 TCP/IP协议 TCP三次握手 HTTP协议 HTTP请求报文 HTTP响应报文 TCP四次挥手 HTTP请求和响应步骤 以上完整表示了HTTP请求和响应的7个步骤,下面从T ...

  7. PHP常用180函数总结【初学者必看】

    数学函数 1.abs(): 求绝对值 <span style="font-size: 14px;">$abs = abs(-4.2); //4.2<br>& ...

  8. Xcode安装CocoaPods

    1.虽然Mac自带Ruby但是安装cocoapods需要gem,gem是一个管理Ruby库和程序的标准包,它通过RubyGem源来查找.安装.升级和卸载软件包.因为gem默认的服务器被墙,因此在安装之 ...

  9. 2019.03.28 bzoj3594: [Scoi2014]方伯伯的玉米田(二维bit优化dp)

    传送门 题意咕咕咕 思路:直接上二维bitbitbit优化dpdpdp即可. 代码: #include<bits/stdc++.h> #define N 10005 #define K 5 ...

  10. free mybtis plugin

    dao接口与mapper.xml的互相跳转