link和@import的区别

link标签和@import都是为了引入css样式

不同之处：

-- 从属关系：

link: 是html标签，能够支持rel等各种属性

@import: 是css提供的语法，只有导入样式表的作用

-- 兼容

link: 不存在兼容问题

@import: 不兼容IE5以下

-- 加载

link: 与页面同时加载

@import: 页面加载完毕后加载

-- 可控制性

link：是DOM结构，可以通过操作DOM来进行操作

@import:  无法直接操作

 

例子：

使用link便签来控制全局样式

 创建两个css文件
 // redBackground.css
 .home {
   background-color: red;
 }
 
 // greenBackground.css
 .home {
   background-color: green;
 }

使用js控制全局样式

function addCss(href) {
    const link = document.createElment(‘link’)
    // 添加link属性
    link.setAttribute('rel', 'stylesheet')
    link.setAttribute('type', 'text/css')
    link.setAttribute('href', href)
    // 在head标签中添加link标签
    document.getElementsByTagName('head')[0].appendChild(link)
}

// 如传入redBackground.css的路径

addCss(http://xxx.xxx.xxx.xxx/css/redBackground.css)

重复执行该方法的话，会添加多个link标签，增加渲染，所以添加删除方法

function removeCss (href) {
  // 获取所有的link标签   
  const links = document.getElementsByTagName('link')
  for (let i = links.length; i >= 0; i--) {
    const link = links[i]
    if (link && link.getAttribute('href') && link.getAttribute('href') === href) {
      link.parentNode.removeChild(link)
    }
  }
}