HTML-тег безопасен для включения элементов, которые ничего не делают

У меня есть элементы (например, div или абзац), которые я не хочу наследовать стили из своих родительских элементов.

например

   <style>
      div{
         padding:3px;
       }
       /* and so many other basic tags styled like p, table, td, span, etc*/
   </style>
    <nonsensetag id="textToGrab">
       <div>Hello World</div>
       <p>Hi world</p>
    </nonsensetag>

поэтому в принципе я не могу использовать div или p для переноса HelloWorld и Hiworld, потому что он будет отформатирован с помощью правил CSS, но реальная причина, по которой я хочу просто обернуть их в тег, чтобы я мог захватить их с помощью javascript, не затрагивая его текущий стиль.

alert($('#textToGrab').text());

теперь что такое тег html, который на самом деле ничего не делает? или мне нужно обернуть его действительным тегом html и принудительно сбросить все стили, потому что css каскады? или его можно создать собственный тег html? если есть вероятность, что я могу добавить что-то в стандартную схему html?

Я уже прочитал этот вопрос, но он не совсем подходит для моей ситуации

Как разбить наследование CSS?

Ответы

Ответ 1

Что такое тег html, который на самом деле ничего не делает?

Теги <span> и <div> не обозначают конкретного значения и предназначены только для разметки.

или мне нужно обернуть его действительным тегом html и принудительно сбросить все стили, потому что css каскады?

Сброс всех стилей настоятельно требует загрузки CSS. Если вы чувствуете, что вам нужно это сделать, вам, вероятно, нужно тщательно подумать о том, что вы делаете. Вы должны работать с каскадными стилями, а не против них.

или его можно создать собственный тег html?

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

если есть вероятность, что я могу добавить что-то в стандартную схему html?

Ну, технически, вы можете. Но это просто не стоит хлопот.

Кроме того, ссылаясь на w3.org:

Не делай этого! Документы должны иметь значение, а также правильный синтаксис. SGML и XML определяют только синтаксис. HTML и XHTML определяют значение. Если вы добавите элементы, которые не определены стандартом, вы сами знаете, что они означают. И через 20 или 50 лет, даже вы можете не знать об этом больше...

Как это можно сделать тогда?

IMO, вся проблема здесь в том, что ваш стиль CSS слишком широк. Вы должны перенести форматирование в .class когда это возможно. Это дает вам более тонкий контроль над тем, где вы применяете каждый .class и допускает большее повторное использование кода. Вы полностью обойдете всю каскадную проблему и сможете обернуть разделы в тегах <span>.

ПРИМЕЧАНИЕ. Остальная часть ответа на самом деле не соответствовала требованиям, но я предпочел бы сохранить ее вместо ее удаления, если кто-то найдет ее полезной

Вы можете пометить теги без использования .class с помощью специального data-*:

<div data-yank='field1'>Hello World!</div>
<p data-yank='field2'>Hi world</p>

Селектор attributeEquals позволяет выбрать соответствующий элемент:

$( "input[data-yank='field2']" ).text()

Ответ 2

Вы можете использовать <section>. Это тег HTML5, но все современные браузеры поддерживают.

Ответ 3

Вы можете использовать любой элемент для этого. Попробуйте обернуть код, который вы хотите использовать в JS, например, с помощью <div class="jsOnly">. Тогда в вашей таблице стилей просто сделайте

.jsOnly {
    display: none;
}

Все внутри этого элемента будет доступно в DOM, но вы не увидите его на странице.