link 与@import 的区别

查找link和@import区别相关的问题,大多答案都有一条是:
link 支持使用 Javascript 控制 DOM 去改变样式;而 @import 不支持。
但是我自己试了一下支持啊。

html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<style type="text/css">
 @import '1.css';
</style>
<body>
<div id="test1">123</div>
</body>
</html>

css

#test1{
    color:red;
}

文本首先是红色的,然后再控制台更改样式

document.getElementById('test1').style.color = 'green'

还是变成了绿色。

不是我理解的这样操作吗?

阅读 4.1k
3 个回答

不是你理解的那个JS操作DOM。

link 支持使用 Javascript 控制 DOM 去改变样式;而 @import 不支持。

这句话的意思是

  • link 支持通过JS创建link标签插入样式表。(createElement)
  • @import 方法不支持通过JS方法插入样式表。

<link></link> 本身这是 DOM 结构,你可以通过 JS 去操作它;而 @import 你无法通过 JS 去控制。

  1. link 是HTML标签;@import 导入样式是CSS语法
  2. link 样式在HTML页面加载时阻塞式加载,也就是在HTML页面加载完前先行加载;而@import导入的样式在页面加载完成后加载,可能导致页面显示的时候无样式可用
  3. link 因为是HTML标签可以通过JS脚本动态加入,例如可以通过运行环境的不同,切换不同的样式文件
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题