Javascript onclick изменить цвет более чем одного элемента - PullRequest
Новая
       21

Javascript onclick изменить цвет более чем одного элемента

0 голосов
/ 24 февраля 2012

Я хочу изменить цвет более чем одного элемента на странице, нажав на кнопку.Я действительно думал, что это будет очень, но у меня много трудностей для достижения этого.Мой код следующим образом меняет первый элемент - и я знаю, что это потому, что я использую document.getElementById, но когда я изменяю его на document.getElementByClass, он перестает работать вообщеЯ пробовал встроенные стили и внутренние стили безрезультатно.Может кто-нибудь, пожалуйста, пожалуйста, объясните, пожалуйста, как это сделать.Я сомневаюсь, что это невозможно.Благодарю.

<html>
<head>
<style>
#p1{color:#4d982b;}
</style>
<script type="text/javascript">
function ChangeStyle()
{
document.getElementByClass("p1").style.color="#aaaaaa";
}
</script>
</head>
<body>

<p class="p1">Hello world!</p>
<p class="p1">Hello world!</p>

<input type="button" onclick="ChangeStyle()" value="Change style" />

</body>

Ответы [ 5 ]

2 голосов
/ 24 февраля 2012

обычно это делается с использованием класса, а не идентификатора.

На странице может быть только один идентификатор. измени свой код на 

<p class="myclass">Hello world!</p>
<p class="myclass">Hello world!</p>

Затем используйте JavaScript, чтобы изменить цветовые атрибуты класса

Вот ссылка, которая поможет Как получитьElementByClass вместо GetElementById с Javascript?

1 голос
/ 24 февраля 2012

У вас не может быть элементов на странице с одинаковым id. id должен быть уникальным для отдельного элемента, поэтому при вызове getElementById("p1") он выберет только первый id со значением "p1".

Решение состоит в том, чтобы использовать классы или иметь 2 getElementById вызовов с двумя разными id.

0 голосов
/ 24 февраля 2012

Метод Getelementbyid работает только с одним элементом.Попробуйте getelementsbyid, который возвращает массив.

0 голосов
/ 24 февраля 2012

Полагаю, вы думаете о document.getElementsByClassName - возможно, кто-то может уточнить для меня, но я верю, что getElementById - единственное возвращаемое значение при получении элементов.с классом "foo" ... 

var elem = document.getElementsByClassName('foo')
for (var i = 0;i < elem.length; i++)
{
elem[i].style.color = '#aaaaaa'
}

Возможно, там есть синтаксические ошибки, но я думаю, что вы поняли общую идею ~

0 голосов
/ 24 февраля 2012

ID должны быть уникальными, поэтому вместо них используйте имена классов: 

<p class="p1">Hello world!</p>
<p class="p1">Hello world!</p>

document.getElementsByClassName приводит к массиву. Вы должны пройти через каждый элемент: 

var list = document.getElementsByClassName("p1");
for (var i = 0; i < list.length; i++) {
    list[i].style.color="#aaaaaa";
}
...