动态样式

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

由于样式是由 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. 9.Redis高可用-哨兵

    9.Redis高可用-哨兵9.1 基本概念9.1.1 主从复制的问题9.1.2 高可用9.1.3 Redis Sentinel的高可用性9.2 安装和部署9.2.1 部署拓扑结构9.2.2 部署Red ...

  2. CentOSmini安装gcc8.2

    一. 如果遇到类似问题: configure: error: in `/usr/local/src/gcc-8.2.0/temp': configure: error: no acceptable C ...

  3. CentOS6系统编译部署LAMP(Linux, Apache, MySQL, PHP)环境

    我们一般常规的在Linux服务器中配置WEB系统会用到哪种WEB引擎呢?Apache还是比较常用的引擎之一.所以,我们在服务器中配置LAMP(Linux, Apache, MySQL, PHP)是我们 ...

  4. 51ak带你看MYSQL5.7源码4:实现SQL黑名单功能

    博客迁移至: https://www.dboop.com/ 从事DBA工作多年 MYSQL源码也是头一次接触 尝试记录下自己看MYSQL5.7源码的历程 申明:个人Python编程很溜,但是C++还停 ...

  5. Vs2017的git真S B

    1.先是无法克隆 2.修改用户还是无法克隆 3.修改用户凭据还是无法克隆 4.重装机器,将vs改为2017企业版,他妈的还是无法克隆 5.测试发现我这台机子无法克隆,其他的可以 6.提示永远是 Git ...

  6. springboot Ehcache使用

    .Ehcache简单说明及使用 EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中默认的CacheProvider. Ehcache是一种广泛使用的开源Ja ...

  7. 一年web网站测试总结

    1. 页面链接检查 每一个链接是否都有对应的页面,并且页面之间切换正确.可以使用一些工具,如LinkBotPro.File-AIDCS.HTML Link Validater.Xenu等工具.Link ...

  8. ASP.NET Core使用EntityFrameworkCore CodeFrist

    1,安装环境: 如果是VS2015,确保已经升级至 update3或以上 .net core sdk (https://www.microsoft.com/net/download/core) vs2 ...

  9. 【转】Android总结篇系列:Activity生命周期

    [转]Android总结篇系列:Activity生命周期 Android官方文档和其他不少资料都对Activity生命周期进行了详细介绍,在结合资料和项目开发过程中遇到的问题,本文将对Activity ...

  10. 高斯混合模型(GMM) - 混合高斯回归(GMR)

    http://www.zhihuishi.com/source/2073.html 高斯模型就是用高斯概率密度函数(正态分布曲线)精确地量化事物,将一个事物分解为若干的基于高斯概率密度函数(正态分布曲 ...