Создание класса CSS в jQuery
Я верю .addClass (), функция в jQuery присоединяет класс CSS к текущему выбору, но я задавался вопросом, я мог создать или определить класс CSS в jQuery и затем присоединить его?
4 ответа
Фактически, вы можете создать правило CSS, которое будет влиять на все элементы на текущей странице. В большинстве браузеров это должно быть так просто:
var style = $('<style>body { background: green; }</style>')
$('html > head').append(style);
Это может работать или не работать в IE, однако вместо этого вы можете использовать проприетарный IE addRule :
document.styleSheets[0].addRule('body', 'background: green', -1);
Естественно, это не поможет вам в создании файлов css которые могут использоваться разными веб-страницами, но это удобный способ изменить стиль большого количества элементов без необходимости повторять их.
Я не совсем уверен, что вы хотите, но думаю, что лучшее, что вы можете сделать, это что-то вроде этого:
var someClass = { "width": "100%", "background": "#ffffff" };
$(this).css(someClass);
Обратите внимание, что это не совсем создание класса, но это может сделать то, что вам нужно.
С помощью jQuery.Rule вы можете написать такой код для добавления нового правила CSS:
$.rule('#content ul{ border:1px solid green }').appendTo('style');
Расширение правила:
$.rule('#content ul', 'style').append('background:#FF9');
Удаление всего правила:
$.rule('#content ul', 'style').remove();
В Документы API .
Внутри он использует уловку «добавить таблицу стилей в заголовок», о которой упоминал и MooGoo .
Вот что-то, что создаст класс CSS, который будет доступен повсюду, и применит его к объекту jQuery. Здесь используется тот же базовый прием, что и упомянутый MooGoo, но он воплощен в полностью функциональный фрагмент кода:
(function() {
var addRule;
if (typeof document.styleSheets != "undefined" && document.styleSheets) {
addRule = function(selector, rule) {
var styleSheets = document.styleSheets, styleSheet;
if (styleSheets && styleSheets.length) {
styleSheet = styleSheets[styleSheets.length - 1];
if (styleSheet.addRule) {
styleSheet.addRule(selector, rule)
} else if (typeof styleSheet.cssText == "string") {
styleSheet.cssText = selector + " {" + rule + "}";
} else if (styleSheet.insertRule && styleSheet.cssRules) {
styleSheet.insertRule(selector + " {" + rule + "}", styleSheet.cssRules.length);
}
}
}
} else {
addRule = function(selector, rule, el, doc) {
el.appendChild(doc.createTextNode(selector + " {" + rule + "}"));
};
}
var createCssClass = function(className, cssProps, doc) {
doc = doc || document;
var head = doc.getElementsByTagName("head")[0];
if (head && addRule) {
var selector = "*." + className;
var ruleBits = [];
for (var i in cssProps) {
if (cssProps.hasOwnProperty(i)) {
ruleBits.push(i + ":" + cssProps[i] + ";");
}
}
var rule = ruleBits.join("");
var styleEl = doc.createElement("style");
styleEl.type = "text/css";
styleEl.media = "screen";
head.appendChild(styleEl);
addRule(selector, rule, styleEl, doc);
styleEl = null;
}
};
jQuery.fn.createAndApplyCssClass = function(className, cssProps) {
createCssClass(className, cssProps, document);
this.addClass(className);
};
})();
$("#someelement").createAndApplyCssClass("test", {
"background-color": "green",
"color" : "white"
});