Как изменить стиль элемента с помощью JS, если у него нет класса или идентификатора?

У меня есть html-файл (преобразованный из docx), и в нем нет имен классов или идентификаторов. Как я могу стилизовать его с помощью JS? Например, если мне нужно изменить цвет заголовка для приведенного ниже файла HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./script.js"></script>
    <title>Document</title>
  </head>
  <body>
    <h1>This is the heading</h1>
    <p>Hello, my name is xyz and this is a para</p>
  </body>
</html>

Это то, что я пробовал, но document.getElementByTagName() не возвращает такой элемент, как document.getElementById()

console.log('hello world');
Heading = document.getElementsByTagName('h1');
console.log(Heading);
Heading.style.color = 'blue';

Редактировать: Я попробовал приведенный ниже код, но он возвращает undefined

console.log('hello world');
Heading = document.getElementsByTagName('h1')[0];
console.log(Heading);
Heading.style.color = 'blue';

enter image description here

Не могли бы вы дать ему идентификатор? Вы можете выбрать его через тип элемента, дочерний элемент и индекс, но использование идентификатора будет менее подвержено ошибкам.

Lissy93 22.04.2022 20:53

И проблема в вашем коде в том, что getElementsByTagName возвращает массив, но вы используете его, как если бы это был один элемент. Добавьте [0] и все должно работать :)

Lissy93 22.04.2022 20:54

Я не уверен, как добавить к нему идентификатор, так как я конвертирую его из docx в файл HTML, чтобы отредактировать его. Позже я конвертирую его обратно в docx. Есть ли более простой способ?

Anirudh 22.04.2022 20:54

Добавление [0] возвращает значение undefined..

Anirudh 22.04.2022 20:55

Вы добавляете его в правильном месте? Скорее всего опечатка, вот вам рабочий пример.

Lissy93 22.04.2022 20:57

почему бы вам не использовать document.querySelector('h1')?

Roman Gavrilov 22.04.2022 20:58

Ваш скрипт работает до загрузки html?

user1599011 22.04.2022 20:59

querySelector ничего не возвращает...

Anirudh 22.04.2022 20:59

Как проверить? @user1599011

Anirudh 22.04.2022 21:00

Ошибка, которую вы описываете, является основным симптомом. Скрипт включается в шапке до загрузки тела. Если JS не находится в функции, он запускается при загрузке файла JS до html. Поместите его в функцию и вызовите ее после загрузки страницы.

user1599011 22.04.2022 21:03
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
1
10
36
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Проблема в вашем коде заключается в том, что getElementsByTagName возвращает массив, но вы используете его так, как если бы это был один элемент.

Попробуй это:

window.addEventListener('load', () => {
  const heading = document.querySelector('h1');
  heading.style.color = 'blue';
});
<h1>This is the heading</h1>
<p>Hello, my name is xyz and this is a para</p>

Извините, я скопировал код, и он все равно возвращает undefined...

Anirudh 22.04.2022 21:00

Вы уверены, что на вашей странице есть элемент h1? Попробуйте открыть консоль, запустить console.log(document.getElementsByTagName('h1')); что вы видите?

Lissy93 22.04.2022 21:01

По-видимому, HTML не был загружен. Спасибо за ответ :)

Anirudh 22.04.2022 21:03

Ааа, так что прослушиватель событий load Романа Гаврилова должен быть решением :)

Lissy93 22.04.2022 21:03

Вы тоже можете попробовать document.querySelector().

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <h1>This is the heading</h1>
    <p>Hello, my name is xyz and this is a para</p>
</body>
<script type="text/javascript">
    const header = document.querySelector('h1');
    console.log(header);
    header.style.color = 'blue';
</script>
</html>

Еще одна вещь, которую следует отметить: нам нужно дождаться загрузки страницы, иначе ваш код javascript запустится первым и вернет значение undefined.

Вы можете обеспечить запуск javascript после загрузки страницы любым из следующих способов:

  1. Добавить прослушиватель событий — document.addEventListener("load", FUNCTION);
  2. Добавить загрузку в тег body — <body onload="FUNCTION()">
  3. Отложить сценарий — <script src="SCRIPT.js" defer>
  4. Наконец, поместите скрипт в самый низ страницы — хотя это не совсем «после загрузки страницы».
Ответ принят как подходящий

Пожалуйста, обновите свой код следующим образом. вы импортировали скрипт перед html. Есть два решения. сначала вам нужно импортировать скрипт после html или использовать

window.addEventListener

window.addEventListener('load', () => {
  const heading = document.querySelector('h1');
  heading.style.color = 'blue';
});
<h1>This is the heading</h1>
<p>Hello, my name is xyz and this is a para</p>

Это сработало!! Большое спасибо

Anirudh 22.04.2022 21:02

Нет проблем @Anirudh

Roman Gavrilov 22.04.2022 21:08

Другие вопросы по теме