currentScript 属性是 JavaScript 中 document 对象的一个属性,它返回正在执行的 <script>
元素。这个属性对于动态加载脚本或在脚本内部引用脚本元素本身时非常有用。
应用场景
动态加载脚本:
-
可以在动态加载的脚本中获取脚本元素本身的属性(如 src、data-* 等),以便进行进一步的逻辑处理。
模块化脚本:
-
在模块化脚本中,可以根据脚本元素上的自定义属性来决定脚本的行为。
调试和日志记录:
- 在大型项目中,特别是加载多个脚本时,可以通过 currentScript 获取当前执行的脚本,帮助调试和日志记录。
样式和内容注入:
- 可以在脚本执行时,动态地将样式或内容注入到页面的特定位置,基于脚本标签的位置或属性。
假设有一个动态加载的脚本,它根据 data-theme 属性来设置页面的主题样式。
<h1 id="title">Hello World!</h1>
<script src="theme-loader.js" data-theme="dark"></script>
// 获取当前执行的脚本元素
const script = document.currentScript;
// 从脚本元素中获取 data-theme 属性的值
const theme = script.getAttribute("data-theme");
// 定义主题样式
const themes = {
dark: {
backgroundColor: "#333",
color: "#fff",
},
light: {
backgroundColor: "#fff",
color: "#000",
},
};
// 应用主题样式
const applyTheme = (themeName) => {
const themeStyles = themes[themeName];
if (themeStyles) {
document.body.style.backgroundColor = themeStyles.backgroundColor;
document.body.style.color = themeStyles.color;
} else {
console.warn(`Theme "${themeName}" is not defined.`);
}
};
// 调用函数应用主题
applyTheme(theme);