Как я могу "сбросить" стили для данного элемента HTML? - PullRequest
Новая
       5

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

13 голосов
/ 11 июня 2010

Я работаю над встраиваемым 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, так что вы можете предположить, что я будупонимаю почти все, что ты мне скажешь.

Ответы [ 2 ]

3 голосов
/ 11 июня 2010

Я собираюсь выбросить это как возможность. Как насчет пользовательских тегов для вашего букмарклета? Требуется немного больше поработать с настраиваемым пространством имен 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 голосов
/ 11 июня 2010

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

...