41、深入探索DOM操作与HTML5新特性

深入探索DOM操作与HTML5新特性

1. 动态样式

在HTML页面中，有两种方式可以引入CSS样式。 <link> 元素用于从外部文件引入CSS，而 <style> 元素则用于指定内联样式。与动态脚本类似，动态样式在页面初始加载时并不存在，而是在页面加载完成后添加的。

以下是一个典型的 <link> 元素示例：

<link rel="stylesheet" type="text/css" href="styles.css">

也可以使用以下DOM代码来创建这个元素：

let link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "styles.css";
let head = document.getElementsByTagName("head")[0];
head.appendChild(link);

为了使代码更具通用性，可以将其封装成一个函数：

function loadStyles(url){
  let link = document.createElement("link");