Недавно я работал над проектом и нуждался в JavaScript, чтобы динамически вставить стили, но предыдущий метод не удался! Причина, по которой я проверял 2 часа, заключалась в том, что я был распутным человеком. Давайте поговорим об этом в конце!
Стиль вставки JavaScript широко используется в фронтальной разработке, особенно при модификации внешних характеристик и скингии страниц. Задача, которую я выполнил в последнее время, состоит в том, что пользователь нажимает кнопку на другом сайте и вставляет сценарий на другой странице сайта, чтобы выполнить его, которая включает вставку в стиле.
Вообще говоря, существует два типа динамических стилей вставки для JavaScript. Одним из них является представление внешних стилей на странице, используйте тег <link> в <head>, чтобы представить файл внешнего стиля, а другой - использовать тег <style> для вставки стиля страницы на странице (тот, который упомянут здесь, не является атрибутом стиля).
1. Представьте внешние стили на странице:
Использование тега <nult> в <head> для введения файла внешнего стиля, это относительно просто, и для каждого основного браузера нет проблем с совместимостью:
Кода -копия выглядит следующим образом:
Функция includeLinkStyle (url) {
var link = document.createElement ("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
document.getElementsbytagname ("head") [0] .appendchild (link);
}
IncludeLinkStyle ("http://css.vevb.com/home/css/reset.css?v=20101227");
Тем не менее, в проекте, который я делаю в настоящее время, само по себе применяется очень мало стилей, и кажется неподходящим непосредственным внедрением файла внешнего стиля, поэтому я выбрал второе решение, используя тег <style> для вставки стиля страницы на странице.
2. Используйте тег <style> для вставки стиля страницы:
Этот метод имеет проблемы совместимости в различных основных браузерах. Стандартные браузеры, такие как Firefox, не могут напрямую получить значение CSSTEXT таблицы стиля. В стандартных браузерах они могут использовать только Document.stylesships [0] .cssrules [0] .csstext для получения стилей индивидуально; В то же время использование: Document.Stylessheets [0] .cssrules [0] .csstext = newcsstext; Страница не будет автоматически обновлять стиль, и вы должны использовать: document.stylesheets [0] .cssrules [0] .style.csstext = newcsstext; Это не кажется гуманизированным и простым в использовании. Хороший метод используется в yui: style.appendchild (document.createtextnode (styles)); Используйте CreateTexTnode, чтобы добавить строки стиля в тег <style>;
Кода -копия выглядит следующим образом:
Функция включает
if (document.getElementById (styleId)) {
Возвращаться
}
var style = document.createElement ("style");
style.id = styleid;
// лучше установить следующие свойства для IE здесь
/*if (isie ()) {
style.type = "text/css";
style.media = "экран"
}*/
(Document.GetElementsBytagName ("head") [0] || document.body) .appendchild (style);
if (style.stylesheet) {// для т.е.
style.stylesheet.csstext = styles;
} else {// для w3c
style.appendchild (document.createtextnode (styles));
}
}
var styles = "#div {founal-color:#ff3300; color: #fffff}";
IncludeStestleElement (Styles, "NewStyle");
Таким образом, элементы на странице могут быть непосредственно применены к стилю, независимо от того, добавляются ли ваши элементы через сценарий.
О руке глупо:
Посмотрите на этот код:
Кода -копия выглядит следующим образом:
var divobj = document.createElement ("div");
divobj.id = "__div";
divobj.innerhtml = "test js вставьте Dom и стиль";
document.body.appendchild (divobj);
var styles = "#__ div {founal-color:#ff3300; color: #fffff}";
IncludeStestleElement (Styles, "NewStyle");
Как упоминалось ранее, этот проект - это когда пользователь нажимает кнопку на другом сайте и вставляет скрипт на другой странице сайта, чтобы выполнить его. Это включает в себя вставку стиля. Чтобы обеспечить уникальность идентификатора элемента, который я создал как можно больше, я добавил «__» перед идентификатором элемента, чтобы указать, что частная защита от конфликтов. В результате трагедия была вызвана. Наименование IE6, IE7 Class и ID не могло начать с Underscore ("_"), и я на самом деле забыл это! Потребовалось два часа, чтобы узнать причину. Это трагедия! Сделайте вывод! Не будьте дешевыми, когда делаем фронт!