Удалить правила стиля CSS из одного HTML-элемента программно

Question

Удалить правила стиля CSS из одного HTML-элемента программно

0

Я хочу добавить некоторые элементы HTML в свой документ, который вообще не имеет стиля. Но я должен заверить, что эти элементы не будут выглядеть иначе, независимо от проекта, веб-страницы или чего-либо еще. Эти элементы будут вставлены на страницу Javascript и будут SPAN.

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

Поэтому позвольте предположить, что я пишу виджет, и любой из вас может использовать его на ваших собственных веб-страницах. Вот почему я не могу сильно изменить стиль элементов, например, напрямую изменить таблицы стилей. Решение должно быть достигнуто с помощью Javascript. JQuery не нужен.

<head>
   <style>
     span{
       font-weight: bold;
       /*anything else goes below*/
     }
   </style>
</head>

<body>
   <span class='a_regular_span'>This text must be bold and anything else</span>
   <span>This text must have only the CSS rules I applied by Javascript, and must not inherit the rules for all SPANs in the page</span>
</body>

Есть идеи?

Victor Ferreira 28 нояб. 2013, в 22:01

Источник

Теги:

javascript

html

css

3 ответа

Ещё вопросы

Oriol · Answer 1 · 2013-11-28T19-00-00.000Z

Поэтому позвольте предположить, что я пишу виджет, и любой из вас может использовать его на ваших собственных веб-страницах. Вот почему я не могу многое изменить стиль элементов напрямую

Вы можете использовать элемент style с атрибутом scoped. Таким образом вы можете стилизовать только свои элементы, не затрагивая другие части страницы.

Но имейте в виду, что старые браузеры не поддерживают его.

И если вы не хотите, чтобы стили страниц влияли на ваши элементы, см. Раздел Как я могу предотвратить влияние CSS на определенный элемент?

В то время как метод scoped может игнорировать другие стили CSS. Вставка диапазона в неправильном месте испортит стиль другого диапазона.
да, я думаю, что мне понадобится более общее решение, но я понял из прочтения описания области scoped , что другие элементы не наследуют эти правила. Мне нужны другие правила, чтобы не наследоваться конкретными элементами.
@VictorFerreira Затем, посмотрите на вопрос, который я задал несколько лет назад: как я могу предотвратить влияние CSS на определенный элемент?
Блок стилей с атрибутом scoped перезапишет глобальные стили, обычно встречающиеся в заголовке (будь то в блоке стилей или в связанной таблице стилей), но только в sibling/descendent elements inside the same parent . Использование стилей с заданной областью без правильного полифилла опасно. В браузере, который их не поддерживает, объявленные вами стили будут affect the entire page . Источник: css-tricks.com/saving-the-day-with-scoped-css
@ThanhTrung Да, именно поэтому я предупредил, что старые браузеры не поддерживают его.

tjscience · Answer 2 · 2013-11-28T18-52-00.000Z

Если вы действительно хотите отделить стиль своих элементов от элементов других элементов на странице, вы можете использовать специальный тег для этого.

Например, вместо использования span вы можете использовать custompan и стилизовать эти элементы любым способом.

<head>
   <style>
     span{
       font-weight: bold;
       /*anything else goes below*/
     }
   </style>
</head>

<body>
   <span class='a_regular_span'>This text must be bold and anything else</span>
   <customspan>This text must have only the CSS rules I applied by Javascript, and must not inherit the rules for all SPANs in the page</customspan>
</body>

хммм звучит хорошо для меня. код не будет действительным, верно ?! но это хороший шаг
Тег недействителен, но все еще отображается браузерами. Если вы настаиваете на использовании тега span, то не существует идеального решения. В пределах одного сайта / домена любой общий тег все еще может быть изменен с помощью javascript, даже если он находится внутри iframe

Xarxas · Answer 3 · 2013-11-28T18-17-00.000Z

можно попробовать?

 <style>
      span{
        font-weight: bold;
        /*anything else goes below*/
      }    .a_regular_span span{ font-weight: normal;
        /*anything else goes below*/
     }

 </style>