Как мне изменить свойство CSS «display» в javascript - PullRequest
Новая
       5

Как мне изменить свойство CSS «display» в javascript

3 голосов
/ 10 ноября 2011

Как изменить свойство CSS display в JavaScript с display:none на display:normal для этих элементов? 

#hide_0 { display:none }
#hide_1 { display:none }
#hide_2 { display:none }
#hide_3 { display:none }
#hide_4 { display:none }
#hide_5 { display:none }

Только по одному за раз. Мне нужно отобразить один и скрыть остальные.

Что я использовал: 

var persistent_element='hide_1';

function link_update(link_display)
  {
  var local_element;
  local_element=document.getElementById(persistent_element);  
  local_element.style.display='none';
  local_element=document.getElementById(link_display);
  local_element.style.display='block';
  persistent_element=link_display;
  }

Как я это подключил: m4 является минимизированным - подключается по щелчку к этим методам 

m4('l1',function {return link_update(hide_1);}); 
m4('l2',function {return link_update(hide_2);});
m4('l3',function {return link_update(hide_3);});
m4('l4',function {return link_update(hide_4);});
m4('l5',function {return link_update(hide_5);});
m4('l6',function {return link_update(hide_6);});

Ответы [ 3 ]

8 голосов
/ 10 ноября 2011

Чтобы использовать javascript для изменения стиля, вы можете сделать это следующим образом: 

// hide an element
document.getElementById("hide_0").style.display = "none";

// show a block element
document.getElementById("hide_1").style.display = "block";

// to go back to the default or CSS specified value
document.getElementById("hide_2").style.display = "";

Итак, если вы хотите скрыть все и показать один, вы можете сделать это с помощью этой функции: 

function showOneHideOthers(base, len, numToShow) {
    // objects must have ids like base_0, base_1, etc...
    for (var i = 0; i < len; i++) {
        if (i != numToShow) {
            document.getElementById(base+i).style.display = "none";
        }
    }
    document.getElementById(base+numToShow).style.display = "block";
}

showOneHideOther("hide_", 6, 2);

PS normal не является допустимым значением свойства display.Типичными значениями являются block, none и inline, а есть и другие, такие как inline-block, table и т. Д.

1 голос
/ 10 ноября 2011

Ваш вопрос не очень понятен, но суть того, что вы хотите сделать, проста. Вы можете получить ссылку на элемент DOM, который имеет id, используя getElementById, и вы можете изменить свойство display: 

document.getElementById("hide_0").style.display = "none"; //or "block"

Однако у вас есть несколько элементов, которые вы хотите скрыть / показать (я не уверен, когда вы захотите это сделать), поэтому может быть проще использовать другой метод выбора элементов (например, getElementsByTagName) или getElementsByClassName, но это зависит от вашего HTML и того, что вы на самом деле пытаетесь сделать).

0 голосов
/ 10 ноября 2011

Вы можете установить свойство css для элемента, используя метод style. 

div.style.display = '';
...