Создайте правило/класс 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?

ОТВЕТЫ

Ответ 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

Ответ 2

Просто

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

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

Ответ 3

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

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

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

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

Так что это можно использовать повторно. Какую цель вы бы сделали для этого?

Ответ 4

Вы можете использовать insertRule, если вам не нужно поддерживать IE < 9, согласно dottoro. Там есть и кросс-браузерный код.

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

Ответ 5

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

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

Пример:

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

Ответ 6

Если вы не хотите жестко кодировать 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 and Classes.
  $("body").css(body_tag_css);
});

Ответ 7

Это не что-то новое по сравнению с некоторыми другими ответами, так как использует описанную концепцию здесь и здесь, но я хотел использовать объявление в стиле 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, но пока это работает для меня. Если это не так, считайте это отправной точкой для ваших собственных потребностей.:)

Ответ 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> script до создания элементов DOM и, следовательно, перед первым рендерингом документа, избегая визуально-раздражающего рендеринга, а затем вычисляйте, а затем повторно визуализируйте. С помощью jQuery вам придется подождать, когда будут созданы элементы DOM, а затем переформатируйте и повторно отрисуйте их.
  • Элементы, которые динамически добавляются после восстановления, автоматически будут применять новые стили без дополнительного вызова jQuery(newElement).css()

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

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

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

Ответ 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, у вас есть постоянная локальная переменная для работы.

Ответ 10

Что делать, если вы динамически пишете <script> на вашей странице (с вашими динамическими правилами), а затем использовать jQuerys.addClass(класс), чтобы добавить эти динамически созданные правила?

Я не пробовал этого, просто предлагая теорию, которая могла бы работать.

Ответ 11

В (необычных) случаях, когда вы хотите иметь возможность динамически изменять стили часто - например. приложение-создатель темы - добавление <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')

Ответ 12

Немного ленивого ответа на этот вопрос, но следующая статья может помочь: http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml

Кроме того, попробуйте ввести "изменить правила CSS" в google

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

Ответ 13

Вы можете использовать cssRule plug-in. Код был прост:

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

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

Ответ 14

Здесь настройка, которая дает команду над цветами с помощью этого объекта 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);}

Ответ 15

если вы не хотите назначать отображение: none для класса css, правильный подход для добавления в стиль, jQuery.Rule выполняет задание.

В некоторых случаях вы хотите применить stiles перед добавлением события ajax-содержимого и вытеснить контент после добавления, и это все!

Ответ 16

Здесь у вас есть функция, чтобы получить полное определение класса 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 '';
};

Ответ 17

Вы можете использовать этот lib под названием 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, делающий это.

Ответ 18

Я недавно возился с некоторыми из них, и я использовал два разных подхода при программировании сайта 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.

Также более динамичный способ, который я предпочитал, был очень простым дополнением к тегу script или вашему 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() и изменить диапазон элементов.

Надеюсь, это поможет!

Ash.

Ответ 19

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

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

а затем использовать jQuery в выбранной вами точке, чтобы добавить это имя класса к элементу?

Ответ 20

Вы можете просто создать класс css, называемый как-то вроде .fixed-object, в котором есть все ваши css...

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

Затем в jquery в любое время вы хотите, чтобы что-то имело этот стиль, просто добавьте этот класс к нему...

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

Это похоже на самый простой способ сделать это, если я не понимаю, что вам нужно сделать.

Ответ 21

С помощью .addClass() в jquery мы можем динамически добавлять стиль к элементам на странице. например. у нас есть стиль

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

Теперь в состоянии готовности jquery мы можем добавить css как .addClass(MyStyle)