Почему не применяется таблица стилей (добавленная через jQuery)? - PullRequest
Новая
       5

Почему не применяется таблица стилей (добавленная через jQuery)?

1 голос
/ 06 февраля 2012

Это довольно сложный вопрос - по крайней мере, для меня.

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

Букмарклет добавляет встроенную таблицу стилей в конец заголовка. И затем он добавляет div в конец тела с идентификатором, который также находится в таблице стилей.

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

Закладка здесь: http://dl.dropbox.com/u/848981/it/cw/cw.html

А страница, где это не работает, находится здесь: http://www.professionalsagainstect.com/index.html

Обновление: некоторая информация, чтобы было легче разобраться в ней. После нажатия на букмарклет:

  • Посмотрите на конец тега head для таблицы стилей. Он получает атрибут заголовка, начинающийся с "cw.css ...".

  • Тег div, в котором он должен применяться, находится в конце тега body и имеет id = "shield-findword72789".

Обновление 2 : Похоже, что добавляемая мной таблица стилей не применяется, когда в body part:

что-то подобное 
<link rel="stylesheet" type="text/css" href="data:text/css.">

Чтобы обойти это, я применил самые важные стили непосредственно к элементам, которые добавил.

1 Ответ

0 голосов
/ 12 января 2014

Атрибут href необходимо определить после элемент link добавляется к head, например: 

function foo()
  {
  /* get head element */
  var head=document.getElementsByTagName("head")[0];

  /* create link element */
  var qUnitCSS = document.createElement("link");

  /* rel and type attributes required for lazy loading */
  qUnitCSS.rel="stylesheet";
  qUnitCSS.type="text/css";

  /* append link element */
  head.appendChild(qUnitCSS);

  /* define link href after DOM insertion to lazy load */
  qUnitCSS.href="http://qunitjs.com/resources/qunit.css";    
  }()

Вот версия букмарклета: 

javascript:void(function foo(){var head=document.getElementsByTagName("head")[0];var qUnitCSS = document.createElement("link");qUnitCSS.rel="stylesheet";qUnitCSS.type="text/css";head.appendChild(qUnitCSS);qUnitCSS.href="http://qunitjs.com/resources/qunit.css";}() )
...