Створіть правило / клас CSS за допомогою jQuery під час виконання

Зазвичай у мене є CSS-файл, який має таке правило:

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

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

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

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

Ви можете створити елемент стилю і вставити його в 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

Просто

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

Помітили задні косої риси? Вони використовуються для з'єднання рядків, що знаходяться в нових рядках. Якщо вийти з них, це призведе до помилки.

Ви можете застосувати css до об'єкта. Таким чином, ви можете визначити свій об'єкт у своєму javascript таким чином:

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

А потім просто застосуйте його до всіх бажаних елементів

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

Тож це багаторазове використання. З якою метою ти хотів би це зробити?

Можна використовувати insertRule, якщо вам не потрібно підтримувати IE <9, згідно з dottoro . Там також є трохи крос-коду браузера.

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

Ось плагін jquery, який дозволяє вводити CSS:

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

Приклад:

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

Це не щось нове порівняно з деякими іншими відповідями, оскільки він використовує концепцію, описану тут і тут , але я хотів використати декларацію у стилі 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, але поки що це працює для мене. Якщо цього немає, вважайте це вихідними пунктами для власних потреб. :)

Якщо ви не хочете жорстко кодувати 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);
});

Додавання спеціальних правил корисно, якщо ви створюєте віджет jQuery, для якого потрібен спеціальний CSS (наприклад, розширення існуючої рамки CSS jQueryUI для вашого конкретного віджета). Це рішення ґрунтується на відповіді Тараса (перша вище).

Припустимо, що у вашій розмітці 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, у вас є стійка локальна змінна.

Зауважте, що 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

У (незвичайних) випадках, коли ви хочете часто мати можливість динамічно змінювати стилі - наприклад, програма для створення тем - додавання тегів <style> або виклик CSSStyleSheet.insertRule () призведе до зростання таблиць стилів, що може мати продуктивність та дизайн наслідки налагодження.

Мій підхід дозволяє лише одне правило на комбінацію селектора / властивості, очищаючи будь-яке існуюче щодо встановлення будь-якого правила. API простий і гнучкий:

function addStyle(selector, rulename, value) {
    var stylesheet = getAppStylesheet();
    var cssRules = stylesheet.cssRules || stylesheet.rules;
    var rule = stylesheet.insertRule(selector + ' { ' + rulename + ':' + value + ';}', cssRules.length);
}

function clearStyle(selector, rulename) {
    var stylesheet = getAppStylesheet();
    var cssRules = stylesheet.cssRules || stylesheet.rules;
    for (var i=0; i<cssRules.length; i++) {
        var rule = cssRules[i];
        if (rule.selectorText == selector && rule.style[0] == rulename) {
            stylesheet.deleteRule(i);
            break;
        }
    }       
}

function addStyles(selector, rules) {
    var stylesheet = getAppStylesheet();
    var cssRules = stylesheet.cssRules || stylesheet.rules;
    for (var prop in rules) {
        addStyle(selector, prop, rules[prop]);
    }
}

function getAppStylesheet() {
    var stylesheet = document.getElementById('my-styles');
    if (!stylesheet) {
        stylesheet = $('<style id="my-styles">').appendTo('head')[0];
    }
    stylesheet = stylesheet.sheet;
    return stylesheet;
}

Використання:

addStyles('body', {
    'background-color': 'black',
    color: 'green',
    margin: 'auto'
});

clearStyle('body', 'background-color');
addStyle('body', 'color', '#333')

Що робити, якщо ви динамічно написали на своїй сторінці розділ <script> (зі своїми динамічними правилами), а потім використали jQuerys .addClass (клас) для додавання цих динамічно створених правил?

Я цього не пробував, просто пропоную теорію, яка може працювати.

На це відповісти ледачий, але наступна стаття може допомогти: http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml

Також спробуйте ввести "змінити правила css" в google

Не впевнений, що могло б статися, якщо ви спробуєте завернути документ.styleSheets [0] з jQuery (), хоча ви можете спробувати

Ви можете використовувати плагін cssRule . Код тоді був простим:

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

Один із коментарів, що поки що запитували, чому б хотіли робити таке. Наприклад, створення стилів для списку, де кожному елементу потрібен чіткий колір фону (наприклад, список календарів GCal), де кількість стовпців не відома до часу запуску.

Ось установка, яка дає команду над кольорами з цим об’єктом json

 "colors": {
    "Backlink": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Blazer": ["rgb(240,240,240)"],
    "Body": ["rgb(192,192,192)"],
    "Tags": ["rgb(182,245,245)","rgb(0,0,0)"],
    "Crosslink": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Key": ["rgb(182,245,182)","rgb(0,118,119)"],
    "Link": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Link1": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Link2": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Manager": ["rgb(182,220,182)","rgb(0,118,119)"],
    "Monitor": ["rgb(255,230,225)","rgb(255,80,230)"],
    "Monitor1": ["rgb(255,230,225)","rgb(255,80,230)"],
    "Name": ["rgb(255,255,255)"],
    "Trail": ["rgb(240,240,240)"],
    "Option": ["rgb(240,240,240)","rgb(150,150,150)"]
  }

ця функція

 function colors(fig){
    var html,k,v,entry,
    html = []
    $.each(fig.colors,function(k,v){
        entry  = "." + k ;
        entry += "{ background-color :"+ v[0]+";";
        if(v[1]) entry += " color :"+ v[1]+";";
        entry += "}"
        html.push(entry)
    });
    $("head").append($(document.createElement("style"))
        .html(html.join("\n"))
    )
}

створити цей елемент стилю

.Backlink{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Blazer{ background-color :rgb(240,240,240);}
.Body{ background-color :rgb(192,192,192);}
.Tags{ background-color :rgb(182,245,245); color :rgb(0,0,0);}
.Crosslink{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Key{ background-color :rgb(182,245,182); color :rgb(0,118,119);}
.Link{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Link1{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Link2{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Manager{ background-color :rgb(182,220,182); color :rgb(0,118,119);}
.Monitor{ background-color :rgb(255,230,225); color :rgb(255,80,230);}
.Monitor1{ background-color :rgb(255,230,225); color :rgb(255,80,230);}
.Name{ background-color :rgb(255,255,255);}
.Trail{ background-color :rgb(240,240,240);}
.Option{ background-color :rgb(240,240,240); color :rgb(150,150,150);}

якщо ви не хочете призначити дисплей: немає класу css, правильний підхід для додавання до стилю, jQuery.Rule зробіть роботу.

Я в деяких випадках ви хочете застосувати стилі перед подією додавання вмісту ajax і зникати вміст після додавання, і це все!

Тут у вас є функція отримати повне визначення класу CSS:

getCSSStyle = function (className) {
   for (var i = 0; i < document.styleSheets.length; i++) {
       var classes = document.styleSheets[i].rules || document.styleSheets[i].cssRules;
       for (var x = 0; x < classes.length; x++) {
           if (classes[x].selectorText  && - 1 != classes[x].selectorText.indexOf(className)) {
               return classes[x].cssText || classes[x].style.cssText;
           }
       }
   }
   return '';
};

Ви можете використовувати цю ліб під назвою cssobj

var result = cssobj({'#my-window': {
  position: 'fixed',
  zIndex: '102',
  display:'none',
  top:'50%',
  left:'50%'
}})

Кожен раз, коли ви можете оновити свої правила так:

result.obj['#my-window'].display = 'block'
result.update()

Потім ви змінили правило. jQuery - це не lib, що робить це.

Нещодавно я возився з цим, і я застосував два різних підходи при програмуванні iPhone / iPod-сайту.

Перший спосіб, коли я натрапив на пошуки змін орієнтації, щоб ви могли побачити, чи телефон портретний, або пейзажний, це дуже статичний спосіб, але простий і розумний:

У CSS:

#content_right,
#content_normal{
 display:none;
}

У файлі JS:

function updateOrientation(){
  var contentType = "show_";
  switch(window.orientation){
   case 0:
   contentType += "normal";
   break;

   case -90:
   contentType += "right";
   break; document.getElementById("page_wrapper").setAttribute("class",contentType);
}

У PHP / HTML (Імпортуйте свій JS-файл, а потім у тег body):

<body onorientationchange="updateOrientation();">

Це, в основному, вибирає інший попередньо встановлений блок CSS для запуску залежно від результату, повернутого з файлу JS.

Також більш динамічним способом, який я віддав перевагу, було дуже просте доповнення до тегу сценарію або вашого файлу JS:

document.getelementbyid(id).style.backgroundColor = '#ffffff';

Це працює для більшості браузерів, але для IE найкраще забрати боєприпаси чимось жорсткішим:

var yourID = document.getelementbyid(id); 
 if(yourID.currentstyle) { 
  yourID.style.backgroundColor = "#ffffff";      // for ie :@ 
 } else { 
  yourID.style.setProperty("background-color", "#ffffff");        // everything else :)
 }

Або ви можете використовувати getElementByClass()та змінювати ряд предметів.

Сподіваюся, це допомагає!

Зола.

Можливо, ви можете помістити інформацію про стиль у окремий клас у вашому файлі css, наприклад:

.specificstyle {
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}

а потім використати jQuery у вибраній точці, щоб додати це ім'я класу до елемента?

Ви можете просто зробити клас css під назвою щось на зразок .fixed-об'єкта, у якому є всі ваші css ...

.fixed-object{
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}

Тоді в jquery будь-коли ви хочете, щоб щось було в цьому стилі, просто додайте до нього клас ...

$(#my-window).addClass('fixed-object');

Це здається найпростішим способом зробити це, якщо я не розумію того, що вам потрібно зробити.

Використовуючи .addClass () у jquery, ми можемо динамічно додавати стиль до елементів на сторінці. напр. у нас є стиль

.myStyle
{
  width:500px;
  height:300px;
  background-color:red;
 }

Тепер у готовому стані jquery ми можемо додати css на зразок .addClass (myStyle)