Как я могу стили "reset" для данного элемента HTML?

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

Какое наименьшее многообещающее и/или ресурсоемкое занятие для обеспечения того, чтобы элементы, которые я вставляю, точно так, как я бы хотел? Есть ли простой способ очистить все стили для данного элемента HTML и детей? Например, в firebug вы можете удалить все стили. Мне кажется, что должен, а наименьший должен, быть родным способом для исключения определенных элементов HTML из правил таблиц стилей?

Пример:

var myHTML = $("<div>my html in here</div>");
myHTML.resetAllStyles();   //<--- what would this function do?
myHTML.appendTo("body");

Я действительно хочу избежать явного указания атрибутов, которые я хочу для каждого элемента, который я вставляю...

PS: У меня большой опыт работы с JS и CSS, поэтому вы можете предположить, что я пойму в значительной степени все, что вы мне скажете.

Ответ 1

Я собираюсь бросить это там как возможность. Как насчет пользовательских тегов для вашего букмарклета? Требуется немного больше поработать с пользовательским пространством имен xml из-за IE, но может быть работоспособным для вас.

jQuery, похоже, тоже не обращает внимания.

http://jsfiddle.net/uvfAf/1/

JQuery

$('#tester').animate({opacity: .3},1000);

HTML:

   // Not the main HTML tags. These are embedded in the body as the root
   //   of the bookmarklet. Scary? Perhaps.
<html xmlns:customtag>
    <style> 
        @media all {  
          customtag\:someElement { 
            width:100px; 
            height: 100px; 
            background: blue; 
            display: block; 
          } 
          customtag\:someOtherElement { 
            width: 50px; 
            height: 50px; 
            background: red; 
            display: block; 
          }
        }
    </style>
    <customtag:someElement id='tester'>test</customtag:someElement>
    <customtag:someOtherElement>test</customtag:someOtherElement>
</html>

Я использовал эту страницу, чтобы выяснить, как делать пользовательские теги в IE:

http://happyworm.com/blog/tag/custom-tags/

EDIT:

Похоже, IE хочет, чтобы xmlns определялся в тегах HTML, поэтому я изменил контейнер на <html>. Не уверен в целом, но, похоже, работает.

Я обновил пример и jsFiddle.

Ответ 2

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