Sign in to follow this  
thesupertaras

Вопрос: как обратиться к элементам по class'у?...

Recommended Posts

Подскажите пожалуйста, возможно ли обратиться через javascript к классу элементов...

знаю, что можно обратиться к элементу по id (например, var header = document.getElementById('header') )...

или по названию элемента (например, var div = document.getElementsByTagName('div')[0] )...

В первом случае обращаемся к 1 элементу с конкретным id, во втором - к элементу с заданным порядковым номером...

А очень часто бывает нужно обратиться именно к классу элементов... Если кто знает как это сделать, подскажите пожалуйста...

Спасибо...

Share this post


Link to post
Share on other sites

Вроде правильно использую метод getElementsByClassName... Объясните, почему тогда надпись text не становиться красной??? В чем причина???

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">
window.onload = function() {
var abc = document.getElementsByClassName('abc');
abc.style.color = '#f00';
}
</script>

</head>
<body>

<p class="abc">text text</p>
</body>
</html>

Share this post


Link to post
Share on other sites

thesupertaras, я пользуюсь функцией

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">
function getElementsByClass(searchClass,node,tag)
{
var classElements = [];

if (node == null)
{
node = document;
}

if (tag == null)
{
tag = '*';
}

var els = node.getElementsByTagName(tag);
var elsLen = els.length;

var pattern = new RegExp("(^|s)"+searchClass+"(s|$)");
var i;
for (i = 0; i < elsLen; i++)
{
if (pattern.test(els[i].className))
{
classElements[classElements.length] = els[i];
}
}

return classElements;
}


window.onload = function() {
var abc = getElementsByClass('abc');
abc[0].style.color = '#f00';
}
</script>

</head>
<body>

<p class="abc">text text</p>
</body>
</html>

Share this post


Link to post
Share on other sites
Вроде правильно использую метод getElementsByClassName... Объясните, почему тогда надпись text не становиться красной??? В чем причина???

потому что abc у тебя массив.

Share this post


Link to post
Share on other sites

Sectronix, спасибо огромное!.. Вот это реально работающее решение для всех браузеров!... :cool:

thesupertaras, я пользуюсь функцией

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">
function getElementsByClass(searchClass,node,tag)
{
var classElements = [];

if (node == null)
{
node = document;
}

if (tag == null)
{
tag = '*';
}

var els = node.getElementsByTagName(tag);
var elsLen = els.length;

var pattern = new RegExp("(^|s)"+searchClass+"(s|$)");
var i;
for (i = 0; i < elsLen; i++)
{
if (pattern.test(els[i].className))
{
classElements[classElements.length] = els[i];
}
}

return classElements;
}


window.onload = function() {
var abc = getElementsByClass('abc');
abc[0].style.color = '#f00';
}
</script>

</head>
<body>

<p class="abc">text text</p>
</body>
</html>

Share this post


Link to post
Share on other sites
...мне кажется, что getElementsByClassName браузеры ещ? не поддерживают.

Во-первых, я не упоминал никаких браузеров. А во-вторых, раз уж на то пошло, в Opera 9.5 эта фича уже имеется.

Share this post


Link to post
Share on other sites
AKS, если уж и давать решение...

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

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
Sign in to follow this  

  • Member Statistics

    46,434
    Total Members
    3,128
    Most Online
    Sterben
    Newest Member
    Sterben
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Если свойства нет в спецификации, то откуда его возьмет браузер? Даже если в каком то одном из браузеров введут это свойство то смысла его использовать все-равно не будет, так как в остальных оно работать не будет 🙂   Тогда бардак творился, DHTML, разные объектные модели и все дела. У netscape действительно была такая фича. Хотя не факт что она работала. Вот тут https://www.uv.es/jordi/v3/html/dynhtml/dynamic.pdf можно увидеть что float:center; присутствует в коде, но следом написано что элементы можно выровнять с помощью float слева или справа, или с помощью js по центру. Также в книге указаны допустимые значения для float - left, right, none. Так что это скорее всего была запланированная возможность, которая не получила реализации.
    • Если бы с html и css, все браузеры строго соответствовали спецификациям) Да статье около десятка лет, а то и более. Вот я тоже склоняюсь к тому, что это ошибка. но эта лекция была написана даже с учётом ещё живого на тот момент netscape navigator. Может быть он позволял интерпретировать такую конструкцию. В описании автор указывает, что так блок становится обтекаемым с двух сторон.
    • Может с clear путаете? Или в статье спутали. Наверно, древняя?
      http://htmlbook.ru/css/clear
  • Popular Contributors