Как изменить правила класса CSS с помощью jQuery?

Может кто-нибудь мне помочь, у меня есть два раздела моего вопроса.

  • Я хочу изменить правила класса CSS, используя jQuery на лету.

    .classname{color:red; font-size:14px;}

    В приведенном выше примере у меня есть класс с именем .classname, теперь используя jQuery, я хочу изменить размер шрифта только не цветным с помощью .classname не путем добавления css inline.

  • Я хочу создать и сохранить изменения .classname в файле, помните, что будет полная таблица стилей или нет имен классов, которые будут сохранены в файле.

Как я могу сделать это самым простым и лучшим способом?

Спасибо!

Ответы

Ответ 1

Насколько я знаю, нет способа jQuery для этого. Для этого может быть какой-то плагин jQuery, но я не знаю.

В принципе, то, что вы пытаетесь достичь в своем первом вопросе, возможно, используя свойство styleSheets объекта document. Это немного сложнее, чем вам нужно, чтобы перейти к довольно глубокой цепочке объектов, но тем не менее работает во всех основных браузерах, включая Internet Explorer 6. Ниже приведено доказательство концепции. CSS находится внутри тега STYLE, но также работает с внешним CSS. Я позволю вам сделать абстракции.

Доказательство концепции

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="false">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
.classname {
 color: red;
 font-size: 14px;
}
</style>
<script type="text/javascript">
window.onload = function() {
    document.getElementById("button").onclick = function() {
        var ss = document.styleSheets;

        for (var i=0; i<ss.length; i++) {
            var rules = ss[i].cssRules || ss[i].rules;

            for (var j=0; j<rules.length; j++) {
                if (rules[j].selectorText === ".classname") {
                    rules[j].style.color = "green";
                }
            }
        }
    };
}
</script>
</head>
<body>

<h1 class="classname">Some red text</h1>

<button id="button">Make text green</button>

</body>
</html>

Для вашего второго вопроса у меня нет времени написать решение, но оно будет включать чтение объявлений CSS так же, как указано выше, и использовать свойство cssText объекта CssRule, чтобы построить строку, которая в конечном итоге будет отправляется на сервер с использованием запроса AJAX POST. Серверная сторона - ваш бизнес.

Литература:

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

Ответ 2

Недавно мне пришлось исправить некоторую проблему темы jquery для виджета Autocomplete. Я хотел изменить цвет фона виджета автозаполнения.

Итак, я просмотрел CSS и обнаружил, что класс автозаполнения определяется следующим образом

.ui-autocomplete { position: absolute; cursor: default; }

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

$("<style type='text/css'> .ui-autocomplete { position: absolute; cursor: default; background:black; color:white} </style>").appendTo("head");

Ответ 3

Вы должны использовать этот подход, только если:

  • Вам нужно установить значение то, что нецелесообразно перечислить (то есть варьировать ширину в пикселей) с именами классов
  • И вы хотите применить этот стиль к элементам, которые будет вставлен в DOM в будущее

Существует плагин jQuery, который делает это: http://plugins.jquery.com/project/jquerycssrule

Для небольшого проекта, над которым я работал, я извлек основные вещи и создал следующую функцию:

function addCSSRule(sel, prop, val) {
    for(var i = 0; i < document.styleSheets.length; i++){
        var ss    = document.styleSheets[i];
        var rules = (ss.cssRules || ss.rules);
        var lsel  = sel.toLowerCase();

        for(var i2 = 0, len = rules.length; i2 < len; i2++){
            if(rules[i2].selectorText && (rules[i2].selectorText.toLowerCase() == lsel)){
                if(val != null){
                    rules[i2].style[prop] = val;
                    return;
                }
                else{
                    if(ss.deleteRule){
                        ss.deleteRule(i2);
                    }
                    else if(ss.removeRule){
                        ss.removeRule(i2);
                    }
                    else{
                        rules[i2].style.cssText = '';
                    }
                }
            }
        }
    }

    var ss = document.styleSheets[0] || {};
    if(ss.insertRule) {
        var rules = (ss.cssRules || ss.rules);
        ss.insertRule(sel + '{ ' + prop + ':' + val + '; }', rules.length);
    }
    else if(ss.addRule){
        ss.addRule(sel, prop + ':' + val + ';', 0);
    }
}

Ответ 4

Если я правильно понял ваш вопрос, вы хотели бы прочитать файл CSS, внести изменения в класс и затем сохранить эти изменения, сохранив файл?

Вы не можете сделать это с помощью JavaScript/jQuery, запущенного с клиентской стороны; Вы можете изменить размер шрифта каждого отдельного элемента в DOM, который соответствует классу CSS .classname, например

$('.classname').css('font-size','14px');

но клиентский JavaScript не может получить доступ к файловой системе из веб-браузера, поэтому вам понадобится другой способ (например, код на стороне сервера), чтобы внести изменения в сам файл CSS.

Ответ 5

Вы также можете попробовать JSS, он отлично работал у меня: https://github.com/Box9/jss

Загрузите и включите jss.js в свой HTML:

<script type="text/javascript" src="jss.js"></script>

Добавить новое правило (или расширить существующее правило):

jss('.special', {
    color: 'red',
    fontSize: '2em',
    padding: '10px'
});

Получить существующее правило:

jss('.special').get();

Возврат:

{
    'color': 'red',
    'font-size': '2em',
    'padding-bottom': '10px',
    'padding-left': '10px',
    'padding-right': '10px',
    'padding-top': '10px'
}

Удалить существующее правило:

jss('.special').remove();

Ответ 6

Уровень DOM 2 позволяет напрямую манипулировать правилами CSS для таблицы стилей. ex:

var ss = document.styleSheets[1];  // ref to the first stylesheet
ss.cssRules[0].style.backgroundColor="blue";  // modification of the 1rst rule

Существует 2 интерфейса:

Это позволяет активировать/инактивировать таблицу стилей, удалить правило, добавить правило и т.д.... Все подробности здесь в MDM: Using_dynamic_styling_information

Ответ 7

То, что вы хотите сделать, - это сделать пару тем на сервере (theme1.css, theme2.css, theme3.css и т.д.) и позволить пользователю выбрать тему, которую он любит. Затем вы можете сохранить в базе данных с профилем пользователя тему, которую пользователь выбрал (theme2.css). Когда пользователь отображает свою страницу, вы добавляете вверху страницы тему2.css вместо темы default.css.

Это будет хорошо работать с технологиями на стороне сервера, такими как PHP или ASP.NET, или как вам угодно. Конечно, вы могли бы использовать javascript для сохранения cookie на компьютере пользователя, чтобы запомнить его выбор и снова использовать javascript для включить файл, который вы запомнили через файл cookie.

Если вы хотите, чтобы пользователь точно контролировал то, что применимо к конкретным элементам дизайна (например, цвет заголовка, шрифта и т.д.), вы могли бы снова использовать технологию на стороне сервера (лучше в этом случае по-моему) или javascript сохранить такие вещи, как header = blue, font = Arial и использовать jQuery применить то, что было сохранено на вашей странице.

Надеюсь, он даст вам обзор.

Ответ 8

В полузависимой заметке также см. мой ответ об изменении LESS-переменных, что приведет к обновлению правил CSS. В зависимости от вашего случая, которое может быть более полезным, поскольку одна переменная LESS может управлять множеством правил CSS.... fooobar.com/questions/103433/...

Ответ 9

не уверен в изменении свойств класса, я пришел сюда, чтобы найти ответ на это сам, и, кажется, для этого есть несколько ответов, так как для сохранения вы можете использовать метод jquery $.post для отправки формы, содержащей изменения или $.get с закодированными url значениями, чтобы затем записать в новый файл css с помощью PHP fwrite или file_put_contents. убедитесь, что вы ограничиваете доступ к этой функции или убедитесь, что значения соответствуют определенным критериям, прежде чем хранить какие-либо данные.

Ответ 10

В первой части я обычно указываю блок стиля и включаю/выключаю его с помощью jQuery. Например:

<style type="text/css" id="my-style" media="all">
    .classname{color:red; font-size:14px;}
</style>

Затем вы можете переключиться, установив отключенный атрибут, например:

$('#my-style').prop('disabled', true);
$('#my-style').prop('disabled', false);

Ответ 12

В качестве стилей, применяемых к разделу "перегрузка" главы, их поздний append() со стилями для всех соответствующих элементов будет использоваться, если ранее не было !important.

Функция, используемая для назначения css-содержимого, должна быть text() not html(), чтобы предотвратить случайные инъекции кода

var dynamic_css = function(class_name){
  return '.' + class_name + ' {color:red; font-size:14px;}';
}
var styles = $('<style type="text/css">');
styles.text(dynamic_css('my_classname'));
$('html head').append(styles);

позже:

styles.remove();

он также хорошо работает, чтобы назначить класс элементу стилей для его идентификации позже

Ответ 13

Я уверен, что вы не можете изменить правила внутри существующего стиля. Даже firebug не позволит вам это сделать. Вы можете стилизовать элемент или набор элементов, вы можете назначать и отменять классы, но я не думаю, что вы можете изменить существующие классы. Чтобы делать то, что вы просите, вам нужно будет поддерживать какой-то ассоциативный массив, который записывает предлагаемые изменения в существующие классы, а затем для сохранения этих изменений вам нужно будет загрузить на сервер, который затем может предложить ссылку для загрузки клиенту.

Ответ 14

Я использовал addClass из jquery: http://api.jquery.com/addClass/ а затем установите класс как атрибуты, которые я хочу изменить.