Замена строки на странице с помощью jQuery / javascript

0

Я пытаюсь заменить строку в теге на моей странице html в определенной позиции. Я должен делать это часто и соответствовать точно определенной строке. Например, если у меня есть:

<style id="myStyle">
    h1 {
      background-color: red;  
    }

    h2 {
      background-color: red;
    }
</style>

Я должен заменить h2 background-color, но не h1. Должен ли я переписывать каждый раз текст в теге стиля? Или есть некоторое лучшее решение, которое разбивает, рекомбинирует всю строку и затем заменяет содержимое тега (может быть очень большим).

Функция замены JavaScript не является хорошей, она не заменяется в конкретной позиции.

  • 2
    Это не то, что CSS разработан, чтобы делать хорошо. Возможно, вы захотите решить эту проблему путем добавления и удаления классов, а не пытаться редактировать стили напрямую.
  • 0
    Попробуйте использовать LESS :)
Показать ещё 3 комментария

3 ответа

2

Используя jQuery, вы можете изменить стиль всех элементов h1, находящихся в настоящее время в DOM, например:

$('h1').css({
    'background-color': 'red'
});

Вы не можете изменить то, что находится в тегах стиля. Но вы можете изменять стили элементов на странице с помощью javascript/jQuery. Приведенный выше код иллюстрирует это

  • 1
    Только для h1 s уже на странице. Ответ в порядке, но нуждается в этом примечании стороны.
  • 0
    Заменяет ли он код в теге style? Или только для всех тегов h2 на странице?
Показать ещё 13 комментариев
0

Вы можете сделать это с помощью jQuery

$('h1').css("cssText", 
"background-color: green; other-css-properties;" );

Если вы действительно хотите быть конкретным, вы можете дать идентификатор или класс тому, что вы хотите изменить, и сделать что-то вроде

$("#given-id").css(...) for ids and $(".given-class").css(...) for classes
  • 0
    Пожалуйста, внимательно прочитайте вопрос. Я ценю, что вы пытаетесь помочь, но это не то, о чем я просил. Изменяет атрибут стиля h1, а не содержимое тега style.
-1

Дайте h2 идентификатор "h2", а затем любое событие, которое вы хотите, которое инициирует изменение, выполнит следующую строку.

document.getElementsById("h2")[0].setAttribute("style","color: red; background-color: gray;"); 
  • 0
    Нет. Пожалуйста , не давайте вашему h2 идентификатор "h2". Просто не надо. Если вы хотите сделать это таким образом, вы можете просто использовать document.getElementsByTagName("h2") .

Ещё вопросы

Сообщество Overcoder
Наверх
Меню