动态样式

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

由于样式是由 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. Day2数据结构和算法

    2019-02-28,10:23:52 算法效率的度量方法 事后统计方法:为每一个程序编制测试程序 ,比较时间.(很麻烦,没有普遍适用性) 事前分析估算方法:在计算机程序编写前,依据统计方法对算法进行 ...

  2. Vue仿string.format

    Vue.prototype.$stringFormat = function stringFormat (formatted, args) { for (let i = 0; i < args. ...

  3. CentOS7 常用设置

    安装配置 0.Centos7 优盘U盘安装以及解决安装时引导错误 1.CentOS7开启网卡,设置开机启用网卡 2.CentOS7 修改静态IP地址 3.CentOS7 下使用root免密码输入自动登 ...

  4. HYSBZ 2743 (树状数组) 采花

    题目:这里 题意: 在2016年,佳媛姐姐刚刚学习了树,非常开心.现在他想解决这样一个问题:给定一颗有根树(根为1),有以下 两种操作:1. 标记操作:对某个结点打上标记(在最开始,只有结点1有标记, ...

  5. 查看linux是否为虚拟机,以及其它信息,cpu,主机型号,主板型号等

    dmidecode -s system-product-name 物理机: [root@swnode1]# dmidecode -s system-product-name I840-GS 虚拟机: ...

  6. 利用mybatis generator实现数据库之间的表同步

    项目背景: 项目需要对两个服务器上的表进行同步,表的结构可能不一样.比如服务器A上的表i同步数据到服务器B上的表j,i和j的结构可能不一样,当然大部分字段是一样的.项目看起来很简单,网上一搜也是很多, ...

  7. Pytorch之训练器设置

    Pytorch之训练器设置 引言 深度学习训练的时候有很多技巧, 但是实际用起来效果如何, 还是得亲自尝试. 这里记录了一些个人尝试不同技巧的代码. tensorboardX 说起tensorflow ...

  8. Oracle学习——dmp文件(表)导入与导出

    Oracle学习——dmp文件(表)导入与导出 2014-12-28      0个评论    来源:张文康 廊坊师范学院信息技术提高班 第九期   收藏    我要投稿 前言 关于dmp文件我们用的 ...

  9. powershell脚本找修改的文件

    $sourcedir="D:\workspace" $targetdir="E:\newf" $lastdate="2017-05-19" ...

  10. dubbo入门学习 三 dubbo简介

    http://dubbo.apache.org/zh-cn/docs/user/references/protocol/dubbo.html Dubbo简介 1. Dubbo:一个分布式.高性能.透明 ...