Document.getElementByClassName не работает, но document.getElementById работает
Вот HTML с двумя div, которые у меня есть. Я хочу установить отдельную границу для каждого div. Когда я использую отдельный идентификатор метода для обоих div, он работает, но когда я использую класс, это не так. Как я могу заставить его работать, используя одно и то же имя класса для нескольких div, чтобы установить границу.
<body onload = "myFunction()">
<script>
function myFunction() {
document.getElementByClassName("myDiv").style.border = "thin solid #0000FF";
}
</script>
<style type = "text/css">
.myDiv {
border: "thick solid #0000FF;"
}
</style>
<p> </p>
<h1><strong style = "color: #ff0000;">Mechannics</strong></h1>
<div>
<div class = "rawal">
<p> </p>
<div class = "myDiv" style = "padding: 8px;">
<p><span style = "color: #00bcf4;"><strong>1) <u>Units of Measurement</u></strong></span></p>
<p><strong><em>@ K</em></strong><em>ing <strong>H</strong>ector <strong>D</strong>ied <strong>M</strong>ysteriously <strong>D</strong>rinking </em></p>
<span style = "color: #0000ff;"><strong> K</strong>ilo <strong>H</strong>ecto <strong>D</strong>eka <strong>M</strong>eter <strong>D</strong>eci </span>
<p> </p>
<p><strong><em>C</em></strong><em>hoklate <strong>M</strong>ilk</em></p>
<span style = "color: #0000ff;"><strong>C</strong>enti Milli</span>
<p>…………………………………………………………</p>
</div>
<br>
<br>
<div class = "myDiv">
<p><span style = "color: #00bcf4;"><strong><u>2) Tens ' Multipliers</u></strong></span></p>
<p><strong><em>@ D</em></strong><em>esi </em> <strong><em>H</em></strong><em>ero</em> <strong><em>K</em></strong><em>illed <strong>M</strong>ega <strong>G</strong>igantic <strong>T</strong>errorists</em></p>
<span style = "color: #0000ff;"><strong> D</strong>ekka <strong>H</strong>ecto <strong>K</strong>ilo <strong>M</strong>ega <strong>G</strong>iga <strong>T</strong>era</span>
<p> 10<sup>1</sup> 10<sup>2</sup> 10<sup>3</sup> 10<sup>6</sup> 10<sup>9</sup> 10<sup>12</sup></p>
<p>………………………………………………………</p>
</div>и вот изображение, которое я хочу получить, когда я использую отдельный идентификатор для обоих и используйте функцию
document.getElementById("myDiv").style.border = "thin solid #0000FF";
document.getElementById("myDivv").style.border = "thin solid #0000FF";
@CertainPerformance getElementsByClassName также не работает.
@BirNepali - держу пари, вы неправильно его используете - ожидаете единственного узла?
вам нужен document.getElemenstByClassName("myDiv")[0].style.border - потому что именно так вы используете HTMLCollections / NodeLists
@JaromandaX jsfiddle.net/m4jv0jrm Он действительно возвращает HTMLCollection, как и все методы getElementsBy*.
lol, я толстый палец (никогда не знаю, что возвращает) ... и тестировал getElementsByName вместо getElementsByClassName - mea culpa: p (примечание, не ВСЕ getElementsBy*)
@JaromandaX, Он работает только для первого div, а остальные div остаются такими же ... так какой смысл использовать класс вместо ID. Я хочу использовать тот же стиль для нескольких div здесь .. не только для первого ... есть лучшая альтернатива.
о, так вы хотите, чтобы он работал больше ... затем повторять через HTMLCollection (цикл for хорошо работает для новичков)
любой пример будет лучшим ... и один вопрос вместо использования скрипта, когда я использую <div class = "myDiv" style = "padding: 8px; border: 2px; border-color: red;"> почему это не работает? ?
или Array.from(document.getElementByClassName("myDiv")).forEach(e => e.style.border = "thin solid #0000FF"); для любителей приключений
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Не существует «document.getElementByClassName» - то, что вам нужно, это document.getElementsByClassName. Он возвращает все элементы в виде массива, соответствующие имени этого класса. Затем вам просто нужно выбрать из массива тот, который вам нужен.
См. Документацию здесь: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
document.getElementsByClassName("myDiv")[0], document.getElementsByClassName("myDiv")[1] и т. д.
он фактически возвращает HTMLCollection, который похож на массив, за исключением неперебираемого. Если вы заключите вызов в Array.from(), вы можете перебрать его
Еще лучше использовать querySelectorAll, который возвращает NodeList, который является может напрямую повторяться в современных браузерах.
Вы упускаете «s» в названии функции, это getElementsByClassName, но если вы будете использовать getElementById, то это будет без «s».
Первый всего это getElementsByClassName, а не getElementByClassName отсутствует s
во-вторых он возвращает объект, подобный массиву, для всех дочерних элементов, поэтому вам нужно использовать цикл для применения стилей css ко всем его дочерним элементам.
Совет:querySelectorAll () более полезен, когда вы хотите использовать более сложные селекторы, и имеет отличную совместимость с браузером.
Итак, вы можете попробовать с помощью getElementsByClassName вернуть объект, подобный массиву, всех дочерних элементов, которые имеют все заданные имена классов, и пройти через них, чтобы применить свой стиль css, подобный этому.
<body onload = "myFunction()">
<script>
function myFunction() {
var cols = document.getElementsByClassName('myDiv');
for(i=0; i < cols.length; i++) {
cols[i].style.border='thin solid #0000FF';
linebreak = document.createElement("br");
cols[i].after(linebreak);
}
}
</script>
<style type = "text/css">
.myDiv {
border: "thick solid #0000FF;"
}
</style>
<p> </p>
<h1><strong style = "color: #ff0000;">Mechannics</strong></h1>
<div>
<div class = "rawal">
<p> </p>
<div class = "myDiv" style = "padding: 8px;">
<p><span style = "color: #00bcf4;"><strong>1) <u>Units of Measurement</u></strong></span></p>
<p><strong><em>@ K</em></strong><em>ing <strong>H</strong>ector <strong>D</strong>ied <strong>M</strong>ysteriously <strong>D</strong>rinking </em></p>
<span style = "color: #0000ff;"><strong> K</strong>ilo <strong>H</strong>ecto <strong>D</strong>eka <strong>M</strong>eter <strong>D</strong>eci </span>
<p> </p>
<p><strong><em>C</em></strong><em>hoklate <strong>M</strong>ilk</em></p>
<span style = "color: #0000ff;"><strong>C</strong>enti Milli</span>
<p>…………………………………………………………</p>
</div>
<div class = "myDiv">
<p><span style = "color: #00bcf4;"><strong><u>2) Tens ' Multipliers</u></strong></span></p>
<p><strong><em>@ D</em></strong><em>esi </em> <strong><em>H</em></strong><em>ero</em> <strong><em>K</em></strong><em>illed <strong>M</strong>ega <strong>G</strong>igantic <strong>T</strong>errorists</em></p>
<span style = "color: #0000ff;"><strong> D</strong>ekka <strong>H</strong>ecto <strong>K</strong>ilo <strong>M</strong>ega <strong>G</strong>iga <strong>T</strong>era</span>
<p> 10<sup>1</sup> 10<sup>2</sup> 10<sup>3</sup> 10<sup>6</sup> 10<sup>9</sup> 10<sup>12</sup></p>
<p>………………………………………………………</p>
</div>Хорошо, я заставлю вас принять ответ из моей другой учетной записи, так как у меня здесь меньше репутации ... Кстати, как я могу использовать здесь тег <br> .. Я добавил строку cols [i] .createElement ("BR") ; внутри функции, но это не сработало.
попробуйте вот так linebreak = document.createElement("br"); cols[i].appendChild(linebreak);
Это дает мне этот результат ibb.co/cB8bjS, вместо этого я хочу разделить каждое поле, как показано на изображении выше.
@BirNepali см. Мой отредактированный ответ сейчас. Я использовал метод after() и удалил буквальные теги <br> из вашего html. Запустите фрагмент и убедитесь, что теперь он работает согласно вашим требованиям. Не стесняйтесь проголосовать и принять мой ответ сейчас :)
Идеально, именно то, что мне нужно.
Я уже голосовал за вас с другого моего аккаунта .. Я проголосую еще раз, когда наберусь достаточно репутации в этом аккаунте.
getElementByClassNameне существует. Либо используйте вместо негоgetElementsByClassName, либо, что еще лучше, вообще избегайте HTMLCollections и используйте вместо негоquerySelectorAll(который возвращает статический NodeList, который напрямую перебирается в современных браузерах)