隐藏或显示元素-plainJs-嗨前端

隐藏或显示元素

切换元素的显示属性以使其可见或不可见。

显示和隐藏元素可以通过切换其显示样式来实现：


var el = document.querySelect('div');

// hide
el.style.display = 'none';

// show
el.style.display = '';
// or if the div element is hidden by default via CSS stylesheet
el.style.display = 'block';

但是，在jQuery中创建一个函数，例如$.show()和$.hide()，需要的还不止于此。始终通过将元素的显示样式设置为 "none" 来隐藏元素。显示元素更加困难，因为此功能必须考虑样式表规则以及元素的默认显示样式。例如。跨度将内联作为其默认显示值。将其设置为 "none" 是无效的。

 以下函数非常方便，但是为了使事情简单，show()函数需要一个附加参数； 元素（(block, inline-block, inline等等）的目标显示值：
  
function hide(el) {
    el.style.display = 'none';
}

function show(el, value) {
    el.style.display = value;
}

function toggle(el, value) {
    var display = (window.getComputedStyle ? getComputedStyle(el, null) : el.currentStyle).display;
    if (display == 'none') el.style.display = value;
    else el.style.display = 'none';
}
      
toggle()可用于在可见和不可见之间切换。 如果您不想或不能手动传递目标显示值，它将变得更加复杂。
      以下函数基本上是jQuery的$.show()和$.hide()的原始JavaScript克隆。
      为了使这些功能正常工作，需要存储元素的初始/默认显示样式。 为此，使用数据属性"olddisplay"：
  
// get the default display style of an element
function defaultDisplay(tag) {
    var iframe = document.createElement('iframe');
    iframe.setAttribute('frameborder', 0);
    iframe.setAttribute('width', 0);
    iframe.setAttribute('height', 0);
    document.documentElement.appendChild(iframe);

    var doc = (iframe.contentWindow || iframe.contentDocument).document;

    // IE support
    doc.write();
    doc.close();

    var testEl = doc.createElement(tag);
    doc.documentElement.appendChild(testEl);
    var display = (window.getComputedStyle ? getComputedStyle(testEl, null) : testEl.currentStyle).display
    iframe.parentNode.removeChild(iframe);
    return display;
}

// actual show/hide function used by show() and hide() below
function showHide(el, show) {
    var value = el.getAttribute('data-olddisplay'),
    display = el.style.display,
    computedDisplay = (window.getComputedStyle ? getComputedStyle(el, null) : el.currentStyle).display;

    if (show) {
         if (!value && display === 'none') el.style.display = '';
         if (el.style.display === '' && (computedDisplay === 'none')) value = value || defaultDisplay(el.nodeName);
    } else {
        if (display && display !== 'none' || !(computedDisplay == 'none'))
            el.setAttribute('data-olddisplay', (computedDisplay == 'none') ? display : computedDisplay);
    }
    if (!show || el.style.display === 'none' || el.style.display === '')
        el.style.display = show ? value || '' : 'none';
}

// helper functions
function show(el) { showHide(el, true); }
function hide(el) { showHide(el); }
      
这是一个方便且有用的功能，但确实涉及大量代码。 因此，最好像上面所示那样手动设置元素的显示样式。