Создайте правило / класс CSS с помощью jQuery во время выполнения

Question

Обычно у меня есть файл CSS, который имеет следующее правило:

#my-window {
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}

Как я могу избежать создания такого статического файла CSS, добавляя информацию CSS во время выполнения действий к телу или что-то подобное? (только с использованием jQuery)

Я хочу определить его один раз, но с помощью jQuery и использовать его много раз позже; вот почему я не хочу добавлять его каждый раз к конкретным элементам DOM.

Я знаю простые функции (css("attr1", "value");), но как мне создать полное правило CSS для повторного использования?

Answer 1

Вы можете создать элемент стиля и вставить его в DOM

$("<style type='text/css'> .redbold{ color:#f00; font-weight:bold;} </style>").appendTo("head");
$("<div/>").addClass("redbold").text("SOME NEW TEXT").appendTo("body");

протестировано на Opera10 FF3.5 iE8 iE6

Answer 2

Просто

$("<style>")
    .prop("type", "text/css")
    .html("\
    #my-window {\
        position: fixed;\
        z-index: 102;\
        display:none;\
        top:50%;\
        left:50%;\
    }")
    .appendTo("head");

Заметили обратную косую черту? Они используются для объединения строк в новых строках. Оставляя их, выдается ошибка.

Answer 3

Вы можете применить CSS объект. Таким образом, вы можете определить свой объект в своем javascript следующим образом:

var my_css_class = { backgroundColor : 'blue', color : '#fff' };

А затем просто примените его ко всем элементам, которые вы хотите

$("#myelement").css(my_css_class);

Так что это многоразовое использование. С какой целью ты это сделаешь?

Answer 4

Вы можете использовать insertRule , если вам не нужно поддерживать IE <9, согласно <a href="http://help.dottoro.com/ljvmpkap.php"> dottoro . Там также есть немного кросс-браузерного кода.

document.styleSheets[0].insertRule('#my-window {\
    position: fixed;\
    z-index: 102;\
    display:none;\
    top:50%;\
    left:50%;\
}', 0)

Answer 5

Это не является чем-то новым по сравнению с некоторыми другими ответами, поскольку здесь используется концепция, описанная здесь и здесь , но я хотел использовать объявление в стиле JSON:

function addCssRule(rule, css) {
  css = JSON.stringify(css).replace(/"/g, "").replace(/,/g, ";");
  $("<style>").prop("type", "text/css").html(rule + css).appendTo("head");
}

Использование:

addCssRule(".friend a, .parent a", {
  color: "green",
  "font-size": "20px"
});

Я не уверен, охватывает ли он все возможности CSS, но пока он работает для меня. Если это не так, считайте это отправной точкой для собственных нужд. :)

Answer 6

Вот плагин jquery, который позволяет вам внедрять CSS:

https://github.com/kajic/jquery-injectCSS

Пример:

$.injectCSS({
    "#my-window": {
        "position": "fixed",
        "z-index": 102,
        "display": "none",
        "top": "50%",
        "left": "50%"
    }
});

Answer 7

Если вы не хотите жестко кодировать CSS в блок / файл CSS, вы можете использовать jQuery для динамического добавления CSS в элементы HTML, идентификаторы и классы.

$(document).ready(function() {
  //Build your CSS.
  var body_tag_css = {
    "background-color": "#ddd",
    "font-weight": "",
    "color": "#000"
  }
  //Apply your CSS to the body tag.  You can enter any tag here, as
  //well as ID's and Classes.
  $("body").css(body_tag_css);
});

Answer 8

Обратите внимание, что jQuery().css() не меняет правила таблицы стилей, оно просто меняет стиль каждого соответствующего элемента.

Вместо этого вот функция javascript, которую я написал для изменения самих правил таблицы стилей.

    /**
     * Modify an existing stylesheet.
     * - sheetId - the id of the <link> or <style> element that defines the stylesheet to be changed
     * - selector - the id/class/element part of the rule.  e.g. "div", ".sectionTitle", "#chapter2"
     * - property - the CSS attribute to be changed.  e.g. "border", "font-size"
     * - value - the new value for the CSS attribute.  e.g. "2px solid blue", "14px"
     */
    function changeCSS(sheetId, selector, property, value){
        var s = document.getElementById(sheetId).sheet;
        var rules = s.cssRules || s.rules;
        for(var i = rules.length - 1, found = false; i >= 0 && !found; i--){
            var r = rules[i];
            if(r.selectorText == selector){
                r.style.setProperty(property, value);
                found = true;
            }
        }
        if(!found){
            s.insertRule(selector + '{' + property + ':' + value + ';}', rules.length);
        }
    }

Преимущества:

• Стили могут быть вычислены в сценарии <head> до создания элементов DOM и, следовательно, до первого рендеринга документа, избегая визуально раздражающего рендеринга, затем вычисляя, а затем перерисовывая. В jQuery вам придется ждать, пока будут созданы элементы DOM, а затем изменить их стиль и выполнить повторную визуализацию.
• К элементам, которые добавляются динамически после рестайла, автоматически применяются новые стили без дополнительного вызова jQuery(newElement).css()

Предостережения:

• Я использовал его в Chrome и IE10. Я думаю, что может потребоваться небольшая модификация, чтобы он хорошо работал на старых версиях IE. В частности, в более старых версиях IE не может быть определено s.cssRules, поэтому они вернутся к s.rules, что имеет некоторые особенности, такие как странное / ошибочное поведение, связанное с селекторами, разделенными запятыми, например "body, p". Если вы избегаете этого, вы можете быть в порядке в старых версиях IE без изменений, но я еще не проверял это.
• В настоящее время селекторы должны точно совпадать: используйте строчные буквы и будьте осторожны со списками, разделенными запятыми; порядок должен совпадать, и они должны иметь формат "first, second", т.е. разделитель - запятая, за которой следует пробел.
• Вероятно, можно было бы потратить на это дополнительное время, пытаясь обнаружить и разумно обработать перекрывающиеся селекторы, например, в списках, разделенных запятыми.
• Можно также добавить поддержку медиазапросов и модификатор !important без особых проблем.

Если вы хотите внести некоторые улучшения в эту функцию, вы найдете здесь несколько полезных документов по API: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet

Answer 9

Добавление пользовательских правил полезно, если вы создаете виджет jQuery, для которого требуется пользовательский CSS (например, расширение существующей инфраструктуры jQueryUI CSS для вашего конкретного виджета). Это решение основано на ответе Тараса (первый выше).

При условии, что в вашей HTML-разметке есть кнопка с идентификатором "addrule" и div с идентификатором "target", содержащим некоторый текст:

JQuery код:

$( "#addrule" ).click(function () { addcssrule($("#target")); });

function addcssrule(target) 
{ 
var cssrules =  $("<style type='text/css'> </style>").appendTo("head");

cssrules.append(".redbold{ color:#f00; font-weight:bold;}"); 
cssrules.append(".newfont {font-family: arial;}"); 
target.addClass("redbold newfont");     
}       

Преимущество этого подхода заключается в том, что вы можете повторно использовать переменные cssrules в своем коде для добавления или вычитания правил по желанию. Если cssrules встроен в постоянный объект, такой как виджет jQuery, у вас есть постоянная локальная переменная для работы.

Answer 10

В (необычных) случаях, когда вы хотите иметь возможность часто динамически менять стили - например, приложение для создания тем - добавление тегов