一, 在 JS 中引入 CSS 文件的方法:
1, 通过 document.createElement 方法创建 link 标签;
2, 通过 setAttribute 方法设置 link 标签的 CSS 文件路径;
3, 通过 document.body.appendChild 方法将 link 标签加入到页面中.
(相关课程推荐: JS 视频教程 https://www.html.cn/js/video/ )
代码如下:
- // 引入 CSS
- new_element=document.createElement("link");
- new_element.setAttribute("rel","stylesheet");
- new_element.setAttribute("type","text/css");
- new_element.setAttribute("href","style.css");
- document.body.appendChild(new_element);
二, 引入的 CSS 文件存在的路径问题
如果 JS,CSS 外部文件有使用到相对路径时, 需要注意其相对路径的基准是不一样的.
比如说, 在 index.HTML 中引用到了外部的 JS 和 CSS 文件, JS 中动态的引入 CSS 文件; 这些文件所在的目录如下:
├── JS
| └── index.JS
├── CSS
| └── style.CSS
└── index.HTML
JS 中的 CSS 文件路径应该写成这样:
new_element.setAttribute("href","css/style.css");
而不是../CSS/style.CSS
● JS 文件的相对路径是以引用该 JS 文件的页面为基准
● CSS 文件的相对路径是以自身的位置为基准
来源: http://www.css88.com/qa/javascript/15027.html