Как получитьElementByClass вместо GetElementById с помощью JavaScript?

94

Я пытаюсь переключить видимость определенных элементов DIV на веб-сайте в зависимости от класса каждого DIV. Я использую простой фрагмент кода JavaScript, чтобы переключать их. Проблема в том, что скрипт только использует getElementById, а getElementByClassне поддерживается в JavaScript. И, к сожалению, мне нужно использовать class, а не id для именования DIV, потому что имена DIV динамически генерируются моей таблицей стилей XSLT с использованием определенных имен категорий.

Я знаю, что некоторые браузеры теперь поддерживают getElementByClass, но, поскольку Internet Explorer не поддерживает , я не хочу идти по этому пути.

Я нашел сценарии, использующие функции для получения элементов по классам (например, # 8 на этой странице: http://www.dustindiaz.com/top-ten-javascript/ ), но я не могу понять, как их интегрировать с моим сценарием переключения.

Вот HTML-код. Сами DIV отсутствуют, поскольку они генерируются при загрузке страницы с помощью XML / XSLT.

Главный вопрос: как получить приведенный ниже сценарий Toggle для получения элемента по классу вместо получения элемента по идентификатору?

<html>

<head>

<!--This is the TOGGLE script-->
<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

</head>

<!--the XML/XSLT page contents will be loaded here, with DIVs named by Class separating dozens of li's-->

<a href="#" onclick="toggle_visibility('class1');">Click here to toggle visibility of class 1 objects</a>

<a href="#" onclick="toggle_visibility('class2');">Click here to toggle visibility of class 2 objects</a>

</body>
</html>
javascript class toggle getelementbyid getelementsbyclassname Алан
источник
3
Почему я все время не использовал jQuery? Я принял предложение @Jonathan Sampson об использовании jQuery, и оно работает! (Ответ CMS был тем, что я думал, что искал, но не смог заставить его работать) Я дал каждой ссылке идентификатор, и с помощью jQuery я могу определить, какие классы отображаются, а какие классы скрыты, когда вы нажимаете на конкретная ссылка. БОЛЬШОЙ! Это решение кажется слишком хорошим, чтобы быть правдой. jQuery кажется слишком хорошим, чтобы быть правдой. Какие недостатки использования jQuery? Зачем мне, новичку, использовать Javascript вместо jQuery?
Алан

Ответы:

80

Современные браузеры поддерживают document.getElementsByClassName. Вы можете увидеть полную разбивку поставщиков, предоставляющих эту функциональность, на caniuse . Если вы хотите расширить поддержку старых браузеров, вы можете рассмотреть механизм выбора, подобный тому, что есть в jQuery или polyfill.

Старый ответ

Вы захотите проверить jQuery , который позволит следующее:

$(".classname").hide(); // hides everything with class 'classname'

Google предлагает размещенный исходный файл jQuery, так что вы можете ссылаться на него и сразу же приступить к работе. Включите на свою страницу следующее:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $(".classname").hide();
  });
</script>
Сампсон
источник
1
Хотя это и хорошо, размещенный в Google jQuery полезен только для самых простых вещей из-за безопасности межсайтового скриптинга, реализованной в большинстве современных браузеров.
Пауло Сантос,
2
Вы также можете загрузить исходный файл с jQuery.com и ссылаться на него локально.
Sampson
21
@Paulo: межсайтовый скриптинг не применяется для <script>тегов. JQuery, размещенный в Google, разработан специально для рабочих веб-сайтов (как CDN). Если ваш сайт https, просто убедитесь, что вы используете версию https, чтобы избежать предупреждения о смешанном содержании.
Chetan S
3
Фактически, <script>внедрение тегов является основой межсайтовых запросов JSONP.
Chetan S
2
Пауло, ты понимаешь, что если включить jQuery с тегом <script>, межсайтовых ограничений вообще не будет?
Dark Falcon
88

Этот getElementsByClassNameметод теперь изначально поддерживается самыми последними версиями Firefox, Safari, Chrome, IE и Opera, вы можете создать функцию, чтобы проверить, доступна ли собственная реализация, в противном случае используйте метод Дастина Диаза:

function getElementsByClassName(node,classname) {
  if (node.getElementsByClassName) { // use native implementation if available
    return node.getElementsByClassName(classname);
  } else {
    return (function getElementsByClass(searchClass,node) {
        if ( node == null )
          node = document;
        var classElements = [],
            els = node.getElementsByTagName("*"),
            elsLen = els.length,
            pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;

        for (i = 0, j = 0; i < elsLen; i++) {
          if ( pattern.test(els[i].className) ) {
              classElements[j] = els[i];
              j++;
          }
        }
        return classElements;
    })(classname, node);
  }
}

Применение:

function toggle_visibility(className) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(e.style.display == 'block') {
       e.style.display = 'none';
     } else {
       e.style.display = 'block';
     }
  }
}
Кристиан К. Сальвадо
источник
2
Почему вы используете эту внутреннюю функцию вместо простого кода?
Томаш Зато - Восстановить Монику
-1, например, при условии, что все элементы на экране имеют блочное отображение. В toggle_visibility, если e - это <span>, тогда он должен быть «встроенным», а не «блочным». Гораздо более надежным решением является определение класса CSS: .invisible {display: none! Important} и использование JavaScript (или jQuery) для назначения и отмены назначения этого класса для элементов
Джон Мейер
6 
document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

Иногда, используя getElementsByClassName, он возвращает массив из нескольких классов. Поскольку одно и то же имя класса может использоваться более чем в одном экземпляре внутри одной HTML-страницы. Мы используем идентификатор элемента массива для нацеливания на нужный нам класс, в моем случае это первый экземпляр данного имени класса. Поэтому я использовал [0]

Вишва
источник
3

Используйте его для доступа к классу в Javascript.

<script type="text/javascript">
var var_name = document.getElementsByClassName("class_name")[0];
</script>
Манвендра Приядарши
источник
2

добавляя к ответу CMS , это более общий подход, toggle_visibilityкоторый я только что использовал:

function toggle_visibility(className,display) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(display.length > 0) {
       e.style.display = display;
     } else {
       if(e.style.display == 'block') {
         e.style.display = 'none';
       } else {
         e.style.display = 'block';
       }
     }
  }
}
Cregox
источник
1

Мое решение:

Сначала создайте теги «<style>» с идентификатором.

<style id="YourID">
    .YourClass {background-color:red}
</style>

Затем я создаю в JavaScript такую ​​функцию:

document.getElementById('YourID').innerHTML = '.YourClass {background-color:blue}'

Сработало для меня как шарм.

тилорион
источник
1
Разрывы строк ( <br>) бесполезны / недействительны в теге стиля
Крис Форренс
-1

Добавить идентификаторы в объявление класса

.aclass, #hashone, #hashtwo{ ...codes... }
document.getElementById( "hashone" ).style.visibility = "hidden";
Reltpid
источник