Как можно «стилизовать» элемент div html?

Есть ли простой способ с помощью CSS или javascript или что-нибудь действительно взять div и сделать его не наследующим ни одного стиля?Как можно «стилизовать» элемент div html?

Я создаю букмарклет, который добавляет заголовок на сайт. Он изменяет DOM следующим образом:

var bodycontent = document.body.innerHTML; 
document.body.innerHTML = ''; 

var header = document.createElement('div'); 
var bodycontainer = document.createElement('div'); 
header.setAttribute('id', 'newdiv-header'); 
bodycontainer.setAttribute('id','newdiv-bodycontainer'); 

header.innerHTML = "MY STUFF"; 
bodycontainer.innerHTML = bodycontent; 

document.body.appendChild(header); 
document.body.appendChild(bodycontainer);

настолько эффективно, что мы в конечном итоге это:

<html> 
<head> ...original head stuff... </head> 
<body> 
    <div id="newdiv-header"> MY CONTENT </div> 
    <div id="newdiv-bodycontainer"> ...original content of document.body.innerHTML... </div> 
</body> 
</html>

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

Большое спасибо за любые идеи!

источник

2009-07-28 Mala

Позвольте мне предварить это тем, что все следующие чистый воздух-код :)

Что делать, если вы напали на него с другой стороны? Вместо того, чтобы сбросить все стили в вашем div, измените существующую таблицу стилей так, чтобы все селекторы предназначались для детей # newdiv-bodycontainer.

Этот сайт рассказывает о соответствующем API: http://www.javascriptkit.com/domref/stylesheet.shtml

Edit: Итерация на этой идее, я соединял некоторые тестовый код, чтобы убедиться, что он работает. Я включил его ниже.

Я также нашел следующий сайт полезным: http://www.javascriptkit.com/dhtmltutors/externalcss2.shtml

ВНИМАНИЕ: Это не код продукции. Он не обрабатывает кросс-браузерные несовместимости (которых их много), а также не имеет дело с составными селекторами и не имеет дело с несколькими таблицами стилей.

for (var i = 0; i < document.styleSheets[0].cssRules.length; ++i) { 
    var selector = document.styleSheets[0].cssRules[i].selectorText; 
    var declaration = document.styleSheets[0].cssRules[i].style.cssText; 

    document.styleSheets[0].deleteRule(i); 
    document.styleSheets[0].insertRule('.test ' + selector + '{' + declaration + '}', i); 
    alert(document.styleSheets[0].cssRules[i].selectorText); 
}

Это HTML используется для проверки. Она работает в Firefox и Chrome, но потребует модификации для работы в IE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > 
<html> 
<head> 
<title>Test</title> 

    <style type="text/css"> 
     .test { 
      background-color:red; 
      border: black solid 1px; 
     } 
    </style> 
</head> 
<body> 
    <div class="test" style="width: 10em;"> 
     This is some text that is probably long enough to wrap. 
     <div class="test test2">Test2</div> 
    </div> 

    <script language="javascript"> 
     for (var i = 0; i < document.styleSheets[0].cssRules.length; ++i) { 
      var selector = document.styleSheets[0].cssRules[i].selectorText; 
      var declaration = document.styleSheets[0].cssRules[i].style.cssText; 

      document.styleSheets[0].deleteRule(i); 
      document.styleSheets[0].insertRule('.test ' + selector + '{' + declaration + '}', i); 
      alert(document.styleSheets[0].cssRules[i].selectorText); 
     } 
    </script> 
</body> 
</html>

источник

2009-07-28 19:05:28 AaronSieb

это букмарклет, он не может изменять таблицы стилей каждой страницы, на которой он идет – geowa4

Почему бы и нет? Я не имею в виду физическое изменение файла таблицы стилей. Я имею в виду использование JavaScript для динамического изменения. – AaronSieb

Это выглядит довольно многообещающе! Я попробую это и дам вам знать, как это происходит – Mala

Моя единственная идея - установить для каждого соответствующего свойства CSS значение по умолчанию (или все, что вам нужно). Я не думаю, что существует способ предотвращения стилей, применяемых на одном div.

источник

2009-07-28 18:12:28 chris166

Я пробовал использовать javascript для прокрутки всего документа document.getElementById ('newdiv-header'). И установить все в '' но это не сработало ... знаете ли вы, как автоматизировать ваши предложения? Я не могу попытаться сделать это вручную. – Mala

Установка его в '' не приведет к сбросу настроек по умолчанию. – jimyi

Возможно, вы можете вставить iframe вместо div.

источник

2009-07-28 18:13:11 jhurshman

это может быть мое единственное обращение. Я сомневаюсь, что он удваивает количество запросов, которые должны произойти до того, как что-либо будет отображаться - сначала скрипт, а затем цель iframe – Mala

Поскольку у него есть идентификатор, вы можете просто указать любые значения, которые вы хотите, используя # newdiv-header.

Если вы используете CMS или что-то там, где вы не можете повлиять на порядок, в котором применяются стили, вы можете использовать! Important.

источник

2009-07-28 18:18:28

Это букмарклет. http://en.wikipedia.org/wiki/Bookmarklet – jimyi

Проблема в том, что, поскольку это должно быть выполнено на любой заданной странице, количество правил CSS, которые мне нужно будет сбросить, феноменально огромно – Mala

Немного более кошерная версия предложения @ chris166 будет заключаться в создании специального правила CSS, которое обнуляет необходимые свойства стиля целевого элемента. Таким образом, вы просто добавляете соответствующий класс («нуль» в этом примере) к элементу, а магия CSS/браузера заботится обо всем остальном (в этом примере мы сбросим заполнение).

// in javascript 
foo.className += ' zero'; // multiple classes (space seperated) 

/* then in CSS */ 
.foo.zero { padding: 0px; }

В этом примере используется несколько селекторов класса CSS, чтобы обойти проблемы специфичности, однако, если вам нужно IE6 поддержку, которую вы можете использовать альтернативные методы (то есть регулярное правило CSS, которое является более конкретным, чем другие правила, соответствующие целевые элементы)

источник

2009-07-28 18:54:50

Хотя это может и не быть прямой помощью, может быть проще переместить код в jQuery - если позволяют время и ресурсы.

jQuery имеет намного лучшую обработку элементов HTML, а также общие функции, используемые для взаимодействия с этими элементами.

Для вашего вопроса, по крайней мере, выбор и развёртывание div в jQuery является быстрым. Я готов поспорить, что ваш код также будет достаточно прост в реализации.

Черт, вы могли бы просто запустить только один фрагмент jQuery только для выполнения этой задачи.

источник

2009-07-28 18:58:17 EvilChookie

Просто посмотрел jQuery ... и это выглядит великолепно. * читает учебники * – Mala

* вздох * похоже, что я вернулся к этому. Я читал jQuery, и это действительно потрясающе - я переместил большую часть своего кода, и он работает лучше, чем когда-либо. Но в отношении этой проблемы, в частности, * как * я могу запустить один фрагмент jQuery для выполнения этой задачи? – Mala

http://docs.jquery.com/Attributes/removeClass - Это должно стирать div в том порядке, который вы ищете. Просто бросьте removeClass внутри основного документа. Уже, и вы должны готовить с газом. – EvilChookie

Если он должен быть в состоянии пойти на любой странице, вы либо будете иметь, чтобы сбросить тонну вещей или положить его в кадре. Но так как вы сказали, что фреймы неприемлемы, вы можете использовать Firebug, чтобы получить список вычисленного стиля div в вашей собственной среде песочницы.

В Firebug осмотрите элемент. Перейдите в правую панель и выберите стрелку вниз рядом со словом «Стиль». Затем выберите «Показать вычисленные стили». Это много копирование, но оно решает проблему с вашим фреймом.

источник

2009-07-28 19:12:51 geowa4

Как можно «стилизовать» элемент div html?

ответ

Смежные вопросы