请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

处理jquery追加样式没有生效的问题

 
今天我遇到了一个奇怪的问题,我在使用jQuery动态追加样式时,发现样式并没有生效。我研究了许久,最终找到了原因。 首先,我使用了以下代码来追加样式:
[JavaScript] 纯文本查看 复制代码
$('<style> .test { color: red; } </style>').appendTo('head');

然而,当我尝试在页面中使用类名为“test”的元素时,却没有看到任何颜色变化。我很疑惑,因为我已经在页面头部添加了一个样式标签。 我开始逐步排除问题。首先,我检查了元素的类名是否正确。没有问题。接着,我检查了选择器是否正确。也没有问题。最终,我怀疑是样式的优先级问题。 在网上查找资料后,我发现jQuery动态追加的样式并不会覆盖已有的样式,因为jQuery是使用JavaScript动态添加到页面的。而已有的样式则是在页面加载时就已经存在的。 为了解决这个问题,我试着在样式中添加“!important”:
[JavaScript] 纯文本查看 复制代码
$('<style> .test { color: red !important; } </style>').appendTo('head');

然后,样式立即生效,颜色变成了红色。 综上所述,当使用jQuery动态追加样式时,如果已有的样式优先级比动态添加的样式高,那么样式将不会生效。此时,可以尝试在样式中使用“!important”来覆盖已有的样式。

回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。