Как скрыть, а затем восстановить в исходное состояние (= не всегда «блок»)?

Question

Вот код JavaScript, который вы можете найти везде, когда хотите скрыть / показать элемент:

function sh(_id, _val) {
    if (document.getElementById) { 
        document.getElementById(_id).style.display = _val;
    }
    else {
        if (document.layers) { 
            document._id.display = _val;
        }
        else { 
            document.all._id.style.display = _val;
        }
    }
}
function hide(_id) {
    sh(_id, 'none');
}
function show(_id) {
    sh(_id, 'block');
}

Проблема в функции "show": она заставляет "block". Если я использую таблицу с tr и td, когда я хочу отобразить их, я не отображаю их как "block", а для restore в исходное состояние .

Как мне поступить?

Как бы вы поступили?

Answer 1

Если вы хотите восстановить их значение по умолчанию display, вы можете присвоить ему пустую строку:

element.style.display = '';

Если вы хотите, например, присвоить через CSS,Вы должны хранить его где-нибудь, например, на карте id -> display или как атрибут data-.

Answer 2

Самый простой способ - использовать jQuery и .show () http://api.jquery.com/show/

Второй самый простой способ - обернуть таблицу в div.

Если нет, я бы попробовалгде-то хранить начальное значение отображения (если html5 - атрибут «data-»), если не в каком-то другом скрытом элементе

Answer 3

var previousDisplay = {};
function sh(_id, _val) {
    if (document.getElementById) { 
        document.getElementById(_id).style.display = _val;
    }
    else {

        if (document.layers) { 
if(!previousDisplay[_id]){
          previousDisplay[_id] = document._id.display;
        }
            document._id.display = _val;
        }
        else { 
if(!previousDisplay[_id]){
          previousDisplay[_id] = document.all._id.style.display;
        }
            document.all._id.style.display = _val;
        }
    }
}
function hide(_id) {
    sh(_id, 'none');
}
function show(_id) {
    var style = previousDisplay[_id];
    if(!style){
     style = 'block';
    }
    sh(_id, style );
}

Answer 4

Если цель вашего упражнения - узнать больше о DOM, то вы можете игнорировать этот ответ.Но если дело в том, чтобы заставить работать некоторый пользовательский интерфейс, то:

Я бы предложил использовать jquery.Если бы вы это сделали, весь код, который вы показывали, исчез бы совсем, и вы бы скрыли / отобразили такие элементы:

$('#' + id).hide()
$('#' + id).show()

Если вы хотите придерживаться низкоуровневого API DOM, то вам придетсясохраните предыдущее значение (блок или что-то еще) style.display, чтобы вы могли восстановить его позже.И вы можете сделать это.Но вам придется продолжать писать такой код, учитывая все виды случаев, когда кто-то уже написал код, который делает это, и они раздают его бесплатно.