动态样式

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

由于样式是由 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. JAVA多线程之线程间的通信方式

    (转发) 收藏 记 周日,北京的天阳光明媚,9月,北京的秋格外肃穆透彻,望望窗外的湛蓝的天,心似透过栏杆,沐浴在这透亮清澈的蓝天里,那朵朵白云如同一朵棉絮,心意畅想....思绪外扬, 鱼和熊掌不可兼得 ...

  2. weex h5开发区别-实践初级篇

    html标签 weex中没有标签的概念,html中标签对应于weex中的Components weex 无<span> .<p> ,用<text>替代.但是< ...

  3. python psycopg2 连接pg 建立连接池

    # -*- coding: utf-8 -*-from psycopg2.pool import ThreadedConnectionPool,SimpleConnectionPool,Persist ...

  4. 人脸检测(1)——HOG特征

    一.概述 前面一个系列,我们对车牌识别的相关技术进行了研究,但是车牌识别相对来说还是比较简单的,后续本人会对人脸检测.人脸识别,人脸姿态估计和人眼识别做一定的学习和研究.其中人脸检测相对来说比较简单, ...

  5. n的m划分 整数拆分问题

    n的m划分 将n划分成若干个不超过m的数(正整数)的和,问有几种划分情况. 现在根据n和m的关系,考虑下面几种情况: 当n=1时,不论m的值为多少,只有一种划分,即{1}: 当m=1时,不论n的值为多 ...

  6. 01-SpringMVC 原理

    说明:所有代码调式的环境:开发环境idea,jdk7,tomcat8.5.27,数据库MySQL5.1,spring3.2 SpringMVC 1.什么是SpringMVC? springmvc是sp ...

  7. iOS12 XCode10更新

    原因:libc++.tbd库取代了libstdc++.6.0.9.tbd库 解决方法:我在项目里去掉了libstdc++.6.0.9.tbd库 这个时候去编译还是会报错, 解决方法:Xcode-fil ...

  8. EmWin 字体相关函数

    学习笔记:----------------------------------------------------------- 1:const GUI_FONT * GUI_GetFont(void ...

  9. IDEA导入Maven多项目(Mac下)

    主界面Import Project 选择maven项目目录文件夹 选择Import project from external model 中的maven选项,Next下一步 Sources和Docu ...

  10. php日志报错child exited with code 0 after seconds from start

    因为日志文件老是有这种提示: [27-May-2015 15:13:48] NOTICE: [pool www] child 3998 started [27-May-2015 15:13:59] N ...