<分区>
标签 javascript jquery html css
<分区>
我对这个 JQuery 脚本有一些问题(在使用 Jquery-1.9.1.min.js 的元素上):
$(document).ready(function () {
$("thead.opening").click(function () {
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
alert("INTO second function, chrome: " + is_chrome);
$(this).next().css('width', '10000000em');
$(this).next().css('display', 'table-row-group');
//$(this).next().css('display', is_chrome ? 'table-row-group' : 'table-row-group');
//alert($(this).next().css('display'));
});
});
这个脚本只是简单地给被点击的thead元素相关的tbody元素设置了一个CSS样式，并且这样做:
$(this).next().css('display', 'table-row-group');
它可以工作，但我还必须为此 CSS 属性设置 !important，但如果我这样做，它就无法工作:
$(this).next().css('display', 'table-row-group !important');
所以在线搜索我在 StackOverflow 上找到了这篇文章:How to apply !important using .css()?
因此，在之前的脚本中，我尝试使用:
$(this).next().style('width', '10000000em', 'important');
$(this).next().style('display', 'table-row-group', 'important');
改为:
$(this).next().css('width', '10000000em');
$(this).next().css('display', 'table-row-group');
但问题是我得到了这个错误的结果:
<tbody class="expanded" style="display: block; width: 1e+7em;">
所以看起来 width 属性设置正确但 display 属性设置不正确(事实上它设置在 block 而不是 < strong>表行组)
为什么？我错过了什么？我该如何解决这个问题？
谢谢
最佳答案
我建议创建如下类:
CSS
.forceDisplay { display: table-row-group !important; }
然后使用 jQuery 的 addClass() 方法应用 !important 声明。
$('#element').addClass('forceDisplay');
关于javascript - 为什么我不能使用 JQuery style() 函数设置此 CSS 设置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30032712/