Блог

Главная - Вопросы по программированию - Как изменить содержимое внутри тега только с помощью HTML-страницы, не используя JavaScript

Как изменить содержимое внутри тега только с помощью HTML-страницы, не используя JavaScript

#html

#HTML

Вопрос:

Я хочу, чтобы текст «Привет с этой стороны» изменился, если соответствует медиа-запросу CSS.

 <html>
<head>
  <title></title>
</head>
<body>
  <h1>Hello from this side</h1> 
</body>
</html>

Другими словами, как мне изменить содержимое в <h1> теге всякий раз, когда страница запускается в браузере без использования JavaScript?

Комментарии:

1. Что вы имеете в виду?

2. Я хочу, чтобы всякий раз, когда эта страница запускается в браузере внутри тега <h1>, я хочу добавить текст (не постоянно), вот и все. Возможно ли это без использования JS?

3. Вы можете сделать это с @media помощью css

4. @Adhitya не могли бы вы рассказать мне, как это сделать?

5. Расскажите больше о том, что вам нужно или как это полезно.

Ответ №1:

В этом примере добавлен текст с @media помощью css, настройка max-width или min-width .

HTML

 <html>
<head>
  <title></title>
</head>
<body>
  <h1 id="example-h1"></h1> 
</body>
<html>

@media CSS

 #example-h1:before {
    content: "This is some great text here.";
}

@media (max-width: 670px) {
  #example-h1:before {
     content: "This is some other super great text.";
  }
}

Будет получен вывод, подобный этому фрагменту

 #example-h1:before {
    content: "Yes I'm here";
}

@media (max-width: 670px) {
  #example-h1:before {
     content: "Oh no! I'm There.";
  }
} 
 <html>
<head>
  <title></title>
</head>
<body>
  <h1 id="example-h1"></h1> 
</body>
<html>