Как я могу изменить правила класса css, используя jQuery? - PullRequest
Новая
       83

Как я могу изменить правила класса css, используя jQuery?

52 голосов
/ 07 марта 2009

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

  1. Что я хочу сделать, так это изменить правила класса css, используя jQuery на лету. 

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

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

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

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

Спасибо!

Ответы [ 14 ]

54 голосов
/ 07 марта 2009

Насколько я знаю, нет никакого 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-запроса. Серверная сторона - это ваш бизнес.

Ссылки:

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

17 голосов
/ 18 октября 2011

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

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

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

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

$("<style type='text/css'> .ui-autocomplete { position: absolute; cursor: default; background:black; color:white} </style>").appendTo("head");
13 голосов
/ 01 декабря 2009

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

  • Вам необходимо установить значение что-то непрактичное для перечислять (то есть изменяя ширину в пикселей) с именами классов
  • а ты хочешь применить этот стиль к элементам, которые будет вставлен в 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);
    }
}
12 голосов
/ 07 марта 2009

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

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

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

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

6 голосов
/ 14 июля 2012

Вы также можете попробовать 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();
2 голосов
/ 21 мая 2012

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

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

1 голос
/ 07 марта 2009

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

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

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

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

0 голосов
/ 12 ноября 2014

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

Функция, используемая для назначения css-содержимого, должна быть text(), а не 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();

также хорошо работает для присвоения класса элементу styles для его идентификации позже

0 голосов
/ 06 ноября 2014

Вы можете использовать YUI Stylesheet Utility.

http://yuilibrary.com/yui/docs/stylesheet/

Работает решетка!

0 голосов
/ 13 апреля 2013

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

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

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

$('#my-style').prop('disabled', true);
$('#my-style').prop('disabled', false);
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...