我在JS中有一个隐藏解析元素的函数:
function hide(id){
document.getElementById(id).style.display = "none";
}
如何创建将元素恢复为默认样式值的函数。例如,div display
属性为"block"
,图片为"inline-block"
,其他元素为"inline"
或列表为"list-item"
如何将其带回默认状态?
function show(id){
document.getElementById(id).style.display = "?????";
}
我知道如何在Jquery中做到这一点,但它不是一个选项。
在CSS中,可能存在包含style:none
的元素的样式,需要将其覆盖为默认值。
由于我的示例中有CSS使style.display = ''
消除了JS添加的样式,但又回到了CSS中添加的任何样式,我想在使用CSS分配样式之前将其恢复为默认值。
我尝试了这个,因为它是在其中一条评论的链接中建议的:
elem = document.getElementById(id);
var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("display");
但是在这种情况下,'theCSSprop'
会为"none"
返回div
,当我期待"block"
有什么想法吗? 感谢。
答案 0 :(得分:26)
您只需将其指定为空值:
document.getElementById(id).style.display = "";
或使用removeProperty
方法:
document.getElementById(id).style.removeProperty( 'display' );
但请注意,removeProperty
不适用于IE<9
。
如果您想获得原始CSS值,您可能需要从空<iframe>
元素获取它。我在jsFiddle上创建了example如何使用jsFiddle上的getComputedStyle
和iframe值获取当前值。
请注意getComputedStyle
不支持旧版本的IE。它支持IE9 +。
对于IE8,您应该使用Element.currentStyle
答案 1 :(得分:1)
这是另一个用于检索任何元素的任何属性默认值的解决方案。想法如下:
function getDefaultValue(element, property) {
var elDefault = document.createElement(element.nodeName);
document.body.appendChild(elDefault);
propertyValue = window.getComputedStyle(elDefault,null).getPropertyValue(property);
document.body.removeChild(elDefault);
return propertyValue;
}
function resetPropertyValue (element,propertyName) {
var propertyDefaultValue = getDefaultValue(element, propertyName);
if (element.style.setProperty) {
element.style.setProperty (propertyName, propertyDefaultValue, null);
}
else {
element.style.setAttribute (propertyName, propertyDefaultValue);
}
}
&#13;
#d {
background: teal;
display: inline;
}
&#13;
<button onclick="resetPropertyValue(document.getElementById('d'), 'display')">Try it</button>
<div id="d">test</div>
&#13;
答案 2 :(得分:0)
您可以使用自定义属性
function hide(id){
var elem = document.getElementById(id);
//Store prev value
elem.setAttribute('custom-attr', elem.style.display);
elem.style.display = "none";
}
function show(id){
var elem = document.getElementById(id);
//Set prev value
elem.style.display = elem.getAttribute('custom-attr');
}
答案 3 :(得分:0)
填写空值会删除内联覆盖,因此原始值将再次处于活动状态。
function show(id){
document.getElementById(id).style.display = "";
}
答案 4 :(得分:0)
由于您想要的是元素的默认值而不是样式表中的内容,您只需将值设置为auto。
document.getElementById(id).style.display="auto"
这告诉浏览器计算这种元素的正常显示是什么并使用它。
答案 5 :(得分:0)
注意: 如果为类或标记定义 display:none; (在单独的css文件或 head 部分中),则上述方法无法正常工作。
然后你必须确定它是哪种类型的标签+类,并手动分配特定的值。
这些是可能不起作用的例子:
// In many cases this won't work:
function ShowHide_WillRarelyWork(id, bDisplay) {
// Note: This will fail if parent is of other tag than element.
var o = document.getElementById(id);
if (o == null) return;
//
if (bDisplay) {
o.style.display = 'inherit';
o.style.visibility = true;
}
else {
o.style.display = 'none';
}
} // ShowHide_WillRarelyWork(...)
// This will work in most, but not all, cases:
function ShowHide_MayWork(id, bDisplay) {
// Note: This will fail if element is declared as 'none' in css.
var o = document.getElementById(id);
if (o == null) return;
//
if (bDisplay) {
o.style.display = null;
o.style.visibility = true;
}
else {
o.style.display = 'none';
}
} // ShowHide_MayWork(...)
这很长但很可能会奏效:
function getDefaultDisplayByTag(sTag) {
// This is not fully implemented, as that would be very long...
// See http://www.w3.org/TR/CSS21/sample.html for full list.
switch (sTag) {
case 'div':
case 'ul':
case 'h1':
case 'h2':
case 'h3':
case 'h4':
case 'h5':
case 'h6': return 'block';
//
case 'li': return 'list-item';
//
case 'table': return 'table';
//
case 'td':
case 'th': return 'table-cell';
}
// Fallback:
return 'block';
} // getDefaultDisplayByTag(...)
//
function computeDisplay(o) {
var oFunction = window.getComputedStyle;
if (oFunction) {
var oStyle = window.getComputedStyle(o)
if ((oStyle) && (oStyle.getPropertyValue)) {
return oStyle.getPropertyValue('display');
}
}
if (window.currentStyle) {
return window.currentStyle.display;
}
return null; // <-- This is going to be a bad day...
} // computeStyle(...)
//
// This will most probably work:
function ShowHideObject_WillProbablyWork(o, bDisplay, bMaybeRecursive) {
if ((o == null) || (o == undefined) || (o == document) || (o.tagName == undefined)) return;
//
if (bDisplay == null) bDisplay = true
if (!bDisplay) {
o.style.display = 'none';
}
else {
// First remove any directly set display:none;
if ((o.style.display == 'none') || (o.style.display == '')) {
o.style.display = null;
}
//
var sDisplay = null;
var sDisplayCurrent = computeDisplay(o);
var oParent = o.parentNode;
// Was this element hidden via css?
if ((sDisplayCurrent == null) || (sDisplayCurrent == 'none')) {
// We must determing a sensible display value:
var sTag = o.tagName;
sDisplay = getDefaultDisplayByTag(sTag);
} // else: if ((sDisplayCurrent != null) && (sDisplayCurrent != 'none'))
//
// Make sure visibility is also on:
if (sDisplay != null) o.style.display = sDisplay;
o.style.visibility = true;
//
if (bMaybeRecursive) {
// We should travel up the tree and make sure parent are also displayed:
ShowHideObject_WillProbablyWork(oParent, true, true);
}
} // else: if (!bDisplay) ...
//
} // ShowHideObject_WillProbablyWork(...)
//
// ... and finally:
function ShowHideId_WillProbablyWork(id, bDisplay, bMaybeRecursive)
var o = document.getElementById(id);
ShowHideObject_WillProbablyWork(o, bDisplay, bMaybeRecursive)
} // ShowHideId_WillProbablyWork(...)
当然这可以缩短一点;但这就是我的来源。