Question

我希望编写一个简单的javascript函数来切换给定元素的可见性。问题是，在页面加载之后，初始样式是未知的（至少对我而言）。如何确定给定元素的显示样式元素的当前值是什么？

Answer 1

来自jQuery / Sizzle源代码：

elem.offsetWidth > 0 || elem.offsetHeight > 0 // visible
elem.offsetWidth === 0 || elem.offsetHeight === 0  // hidden

其中elem是DOM元素。

现在我不完全确定如果维度大于零，他们为什么说可见元素。我会说这两个尺寸应该大于零，因为它有资格作为“可见”，但我相信他们知道的更好。（在浏览器中甚至不可能有一个空维度和另一个非零维度。）

更新：还有关于该主题和替代解决方案的另一个讨论（虽然没有尝试过）：How do I check if an element is really visible with JavaScript?

Answer 2

纯Javascript方式，这应该工作。

function getStyle(elementId){
   alert(document.defaultView.getComputedStyle(document.getElementById(elementId), '').getPropertyValue("display"));
}

Answer 3

function getDisplayStyle(elementId){   
 var display = document.getElementById(elementId).style.display;
 alert(display);
}

Answer 4

如果您只查看显示属性，则测量偏移将起作用，但是对可见性的测试需要查看（依赖于浏览器的）样式级联

document.deepCss=function(who, css){
 var val, dv= document.defaultView || window;
 val= who.style[css];
 if(!val){
  if(who.currentStyle) val= who.currentStyle[css];
  else val= dv.getComputedStyle(who,"").getPropertyValue(css);
 }
 return val || "";
}
function isVisible(who){
 return !!(document.deepCss(who,'visibility') != 'hidden' && 
 document.deepCss(who,'display') != 'none');
}

Answer 5

使用jQuery，假设你的元素的id为myElement：

if($("#myElement").is(":visible")){
    // yep, it's visible - handle accordingly
}else{
    // nope, not visible
}

Answer 6

不，不，不需要jquery。

如果显示：你没有。否则，可见性也是如此：隐藏。

 if(mynode.style.display != "none")
    { ..  }
    else

Answer 7

$(document).ready( function () {
 if $('#id').hasClass('hidden') 
   $('#id').toggelClass('hidden');
);

hidden是隐藏元素的CSS类

我可以使用JS确定给定元素的显示CSS样式的当前状态

7 个答案: