Как показать / скрыть несколько элементов одновременно с помощью JavaScript - PullRequest
Новая
       8

Как показать / скрыть несколько элементов одновременно с помощью JavaScript

2 голосов
/ 11 июня 2010

Итак, у меня есть это между моими головными метками 

<script type="text/javascript">
hidden_links = document.getElementsByName("javascript_needed");
    for (i = 0; i < hidden_links.length; i++) {
        hidden_links[i].style.display = "visible";
    }
</script>

И мои дивы похожи на 

    <div name="javascript_needed" style="display: none;">stuff</div>

общая цель здесь - скрыть эти div'ы, когда javascript отключен, и повторно включить их, когда javascript включен ... но по какой-то причине мой код не работает. Я когда-либо пробовал это в консоли webkit, и ничего не ошибалось = \

Ответы [ 5 ]

4 голосов
/ 11 июня 2010

JavaScript выполняется до того, как div находятся в DOM. Стандартный способ сделать что-то после того, как DOM готов, это использовать jQuery $(document).ready(function () { });, но есть и другие способы.

Олдскульный способ - использовать <body onload="myfunction()">.

Вот новый способ ( edit: вставка display:none в CSS):

HTML: 

<p class='javascript_needed'>hello</p>​

CSS: 

.javascript_needed {display:none;}

JavaScript: 

​$(document).ready(function () {
    $('.javascript_needed').show();
});
​
1 голос
/ 11 июня 2010

Ваш JS должен установить отображение div на «block» («visible» не является допустимым значением для отображения).

Кроме того, судя по тому, что ваши элементы отсутствуют в DOMво время запуска кода (ваш код их пока не видит).Выполните любое из следующих действий:

Поместите код в любое место в теле документа ниже divs

или используйте ненавязчивую стратегию для запуска вашей функции в окне.загрузить, а-ля: 

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);

или, использовать готовые функциональные возможности платформы JS, а-ля jQuery : 

$(function () {
    nameOfSomeFunctionToRunOnPageLoad();
});
0 голосов
/ 11 июня 2010

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

Вот что я обычно делаю.В скрипте в <head> документа (который запускается до начала визуализации тела), сделайте следующее: 

document.documentElement.className = "JS";

Тогда любые селекторы CSS, начинающиеся с .JS, будут совпадать, только если JavaScriptвключен.Допустим, вы даете своим ссылкам класс javascriptNeeded (класс здесь более уместен, чем имя).Добавьте это к своему CSS: 

.javascriptNeeded{
 display: none;
}
.JS .javascriptNeeded{

 display: inline;
}

… и элементы будут там с самого начала, но только если JavaScript включен.

0 голосов
/ 11 июня 2010

Разница между display и visible:

  • Элемент visible по-прежнему занимает место на странице. Смежный контент не переставляется, когда элемент переключается между visible и hidden.
  • Элемент, который является display=none, не займет места на странице. Другие значения display приведут к тому, что элемент займет место. Например, display=block не только отображает элемент, но и добавляет разрывы строк до и после него.
0 голосов
/ 11 июня 2010

«visible» не является допустимым значением для «display». Вы после "inline" или "block".

«visible» и «hidden» являются допустимыми значениями свойства CSS «visibility».

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...