如何利用jQuery在CSS中加入!import
1. 需求背景
在工作中碰到这样一种情况:
a. 页面上有一个h4标签;
b. 此h4标签已经被外链CSS定义了color, 并且color中用了!important;
c. 无权限对外部CSS进行修改
2. 需求
点击h4, 换color颜色, 再点击, 返回原始颜色
3. 如何做
功能其实很简单, 在jQuery中用$("#id").css(); 或$("#id").addClass即可实现.
不过在使用上述方法的过程中, 会有一个问题, 那就是jQuery中给h4添加进去的color总是会被外链CSS中的定义所覆盖, 因为它有!important.
怎么办?
解决方法很简单, 使用如下形式代码即可:
jQuery('#id').css('cssText','color: #555!important');
或
document.getElementById('id').style.cssText ='color: #555!important'
或
document.getElementById('id').cssText ='color: #555!important'
这样, jQuery动态添加进去的color就会以行内样式而存在, 行业样式再加!important, 优先级比id或class中的都高.
