html-link disabled问题-1.1

最新推荐文章于 2025-06-12 21:10:41 发布

原创最新推荐文章于 2025-06-12 21:10:41 发布 · 638 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#link #html

前端技术专栏收录该内容

105 篇文章

订阅专栏

本文探讨了一个关于CSS加载的奇特现象，即在通过JavaScript动态插入样式链接时，特定条件下默认样式的disabled属性失效的问题。作者通过修改title属性进行测试，揭示了这一现象背后的逻辑，并分享了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天查看一些源码的时候，发现了一个神奇的问题。什么问题呢？（就不告诉你，来打我啊ヾ(◍°∇°◍)ﾉﾞ）

// var skinList = [{name:'default'},{name:'AA'}];
for (var i = 0; i < skinList.length; i++) {
    document.write('<link rel="stylesheet" type="text/css" href="skin/' + skinList[i].name + '/base.css" title="' + skinList[i].name + '" disabled="true"/>');
}

大家看啊，正常的应该是在页面上加载

<link rel="stylesheet" type="text/css" href="skin/default/base.css" title="default" disabled="true"/>
<link rel="stylesheet" type="text/css" href="skin/AA/base.css" title="AA" disabled="true"/>

应该是这样的吧。两个css都disabled。可是，可但是但可是。。。。结果如下

<link rel="stylesheet" type="text/css" href="skin/default/base.css" title="default"/>
<link rel="stylesheet" type="text/css" href="skin/AA/base.css" title="AA" disabled="true"/>

为什么为什么为什么？为什么第一个没有disabled？

测试一：

for (var i = 0; i < skinList.length; i++) {
    document.write('<link rel="stylesheet" type="text/css" href="skin/' + skinList[i].name + '/base.css" title="AA" disabled="true"/>');
}

<link rel="stylesheet" type="text/css" href="skin/default/base.css" title="AA" disabled="true"/>
<link rel="stylesheet" type="text/css" href="skin/AA/base.css" title="AA" disabled="true"/>

测试二：

for (var i = 0; i < skinList.length; i++) {
    document.write('<link rel="stylesheet" type="text/css" href="skin/' + skinList[i].name + '/base.css" title="default" disabled="true"/>');
}

<link rel="stylesheet" type="text/css" href="skin/default/base.css" title="default"/>
<link rel="stylesheet" type="text/css" href="skin/AA/base.css" title="default"/>

大家看出来是什么问题了吧。就是因为我最开始的数据是[{name:'default'},{name:'AA'}]。当title为default的时候disabled没用，但是当title为别的时候disabled就有用。

好，找到问题了，我接着解决问题去咯。拜拜！