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

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

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

Answer 2

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

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

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

Answer 3

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

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

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

Answer 4

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

Answer 5

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

Answer 6

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

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

Answer 7

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

Answer 8

Может быть, вы можете поместить информацию о стиле в отдельный класс в вашем CSS-файле, например ::10000

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

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

Answer 9

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

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

Ash.

Answer 10

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

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

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

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

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