通过jQuery设置显示属性 - 在Chrome中无法使用？ [英] Setting display-property via jQuery - not working in Chrome?

问题描述

我有以下问题。我有这个jQuery脚本：

  $（document）.ready（function（）{
 $（thead。打开）。click（function（）{
 var is_chrome = navigator.userAgent.toLowerCase（）。indexOf（'chrome'）> -1; 
 alert（INTO second function，chrome： + is_chrome）; 
 $（this）.next（）。css（'width'，'10000000 em'）; 
 $（this）.next -row-group'）; 
 alert（$（this）.next（）。css（'display'））; 
}）
} 
  

当用户点击 thead （具有 class =opening），并且此CSS设置为同一表的 tbody 元素（由 $（this）.next（）表示）：

  style =display：table-row-group; 
  

这适用于FireFox和Internet Explorer，但它

我已获得以下行为（您可以在以前的代码段中看到我已经添加了一些警告（）调试代码）：

1. chrome：true




2. 然后按照我的期望设置CSS属性：

     $（this）.next（）。css（'display'，'table-row-group'）; 
     pre> 
    
    
   ，当执行代表我的的CSS设置的第二个 alert（） tbody 元素：
     $（this）.next table-row-group'）; 
     
   它打印预期值： table-row-group 正确设置，因为我看到警报弹出窗口，并在其下正确呈现了我的页面
    




3. 当我单击警报弹出它消失，我的 tbody 元素有一些可视化问题，特别是发生的是 tbody 元素设置 style =display：block;代替 style =display：table-row-group; tbody

   
   
   





b $ b

似乎Chrome首次正确设置了 display：table-row-group;（因为我看到 tbody 元素在第二个警告弹出窗口下的正确位置），然后当单击此弹出框的确定按钮时自动将其设置为 display：block; / p>



为什么？我缺少什么？如何解决此问题？

感谢

解决方案

> 10000000 em


会导致css错误。

将其更改为 10000000em

http://jsfiddle.net/Mephiztopheles/0nh72pg0/
当你尝试这个链接，它也会删除表显示？< br>
任何其他可以删除样式属性的函数？

都删除了样式属性？

I have the following problem. I have this jQuery script:

$(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', '10000000 em');
        $(this).next().css('display', 'table-row-group');
        alert($(this).next().css('display'));
    })
});

When the user is clicking on the thead (having class="opening") of a table and this CSS is set to the tbody element of the same table (represented by $(this).next()):

style="display: table-row-group;

This works fine for FireFox and Internet Explorer but it doesn't work in Chrome.

I've obtained the following behavior (as you can see in the previous code snippet I have put some alert() to debug the code):

1. INTO second function, chrome: true

2. Then it is sets the CSS property as I expect:

   $(this).next().css('display', 'table-row-group');
   

   and when perform the second alert() that represent the CSS settings for my tbody element:

   $(this).next().css('display', 'table-row-group');
   

   it print the expected value: table-row-group and it is correctly sets because I see the alert popup and under it my page correctly rendered

3. When I click on the OK button of the alert popup it disappear and my tbody element have some visualization problem, in particular what happens is that the tbody element have set style="display: block;" instead style="display: table-row-group;", this is my obtained tbody

Seems as Chrome first correctly sets the display: table-row-group;" (because I see the tbody element in the correct position under the second alert popup) and then automatically sets it to display: block;" when the Ok button of this popup is clicked.

Why? What am I missing? How can I fix this behavior?

Thanks

解决方案

10000000 em

will cause error in css.

change it to 10000000em

http://jsfiddle.net/Mephiztopheles/0nh72pg0/ when you try this link, will it also remove the table display?
any other functions which could remove style properties?
are both style properties removed?

这篇关于通过jQuery设置显示属性 - 在Chrome中无法使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！