Как getElementByClass вместо getElementById с помощью JavaScript?
-
20-09-2019 - |
Вопрос
Я пытаюсь переключить видимость определенных элементов DIV на веб-сайте в зависимости от класса каждого DIV.Я использую базовый фрагмент JavaScript для их переключения.Проблема в том, что скрипт использует только getElementById
, как getElementByClass
не поддерживается в JavaScript.И, к сожалению, мне приходится использовать class, а не id для именования DIVS, потому что имена DIV динамически генерируются моей таблицей стилей XSLT с использованием определенных названий категорий.
Я знаю, что некоторые браузеры теперь поддерживают getElementByClass
, но поскольку Internet Explorer этого не делает, я не хочу идти по этому пути.
Я нашел скрипты, использующие функции для получения элементов по классам (например, # 8 на этой странице: http://www.dustindiaz.com/top-ten-javascript/), но я не могу понять, как интегрировать их с моим скриптом переключения.
Вот HTML-код.Сами DIVS отсутствуют, поскольку они генерируются при загрузке страницы с помощью XML / XSLT.
Главный вопрос:Как мне заставить приведенный ниже скрипт переключения получать элемент по классу вместо получать элемент по идентификатору?
<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>
Решение
Современные браузеры поддерживают document.getElementsByClassName
.Вы можете увидеть полную информацию о том, какие поставщики предоставляют эту функциональность, на странице могу ли я использовать.Если вы хотите расширить поддержку старых браузеров, возможно, вам стоит рассмотреть возможность использования механизма селектора, подобного тому, который есть в jQuery, или полифилла.
Старый ответ
Вы захотите проверить 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>
Другие советы
Тот Самый 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';
}
}
}
document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';
Обычно, используя getElementsByClassName, он возвращает массив из нескольких классов.Потому что одно и то же имя класса может использоваться более чем в одном экземпляре на одной HTML-странице.Мы используем идентификатор элемента массива для выбора нужного нам класса, в моем случае это первый экземпляр данного имени класса. Поэтому я использовал [0]
добавление к Ответ 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';
}
}
}
}
Мое решение:
Сначала создайте "<style>" tags with an ID.
<style id="YourID">
.YourClass {background-color:red}
</style>
Затем я создаю функцию в JavaScript следующим образом:
document.getElementById('YourID').innerHTML = '.YourClass {background-color:blue}'
На меня это подействовало как по волшебству.
Используйте его для доступа к классу в Javascript.
<script type="text/javascript">
var var_name = document.getElementsByClassName("class_name")[0];
</script>
Добавить идентификаторы в объявление класса
.aclass, #hashone, #hashtwo{ ...codes... }
document.getElementById( "hashone" ).style.visibility = "hidden";