Может ли jQuery изменить определение стиля CSS?(не отдельные CSS каждого элемента) - PullRequest
Новая
       3

Может ли jQuery изменить определение стиля CSS?(не отдельные CSS каждого элемента)

35 голосов
/ 02 июля 2010

Я не видел ни одного документа, в котором говорилось бы, что jQuery может изменить любое определение CSS, например, изменить 

td { padding: 0.2em 1.2em }

на 

td { padding: 0.32em 2em }

, но либо нужно изменить всю таблицу стилей, либоизменить класс каждого элемента или изменить CSS каждого элемента.

Возможно ли изменение определения стиля?

Ответы [ 4 ]

54 голосов
/ 02 июля 2010

Существует доступ DOM к таблицам стилей, но это одна из тех вещей, которых мы склонны избегать, потому что IE нуждается в загрузке совместимости.

Лучшим способом, как правило, было бы косвенное инициирование изменения, используя простое изменение класса для предка: 

td { padding: 0.2em 1.2em }
body.changed td { padding: 0.32em 2em }

Теперь просто $('body').addClass('changed') и все обновления td s.

Если вам действительно необходимо создать таблицы стилей: 

var sheet= document.styleSheets[0];
var rules= 'cssRules' in sheet? sheet.cssRules : sheet.rules; // IE compatibility
rules[0].style.padding= '0.32em 2em';

Это предполагает, что рассматриваемое правило td является первым правилом в первой таблице стилей.Если нет, то вам, возможно, придется искать его, повторяя правила поиска правильного selectorText.Или просто добавьте новое правило в конец, переопределив старое: 

if ('insertRule' in sheet)
    sheet.insertRule('td { padding: 0.32em 2em }', rules.length);
else // IE compatibility
    sheet.addRule('td', 'padding: 0.32em 2em', rules.length);

Сам jQuery не предоставляет никаких специальных инструментов для доступа к таблицам стилей, но возможно, что есть плагины, которые могут.

24 голосов
/ 04 апреля 2014 
$('head').append('<style id="customCSS">td { padding: 0.32em 2em }</style>');

Я добавил атрибут id, чтобы вы могли указывать и удалять его, когда вы больше не хотите применять это изменение. 

$('#customCSS').remove();
4 голосов
/ 22 апреля 2013

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

<script>
$(function() {
    calcWidth = CalculateWidth();

    $('body').prepend('<style> .dynamicWidth { width: ' + calcWidth + 'px } </style>');
}
</script>

Примечание: может иметь значение, куда вы помещаете скрипт (prepend,добавить) в зависимости от того, как вы хотите, чтобы правила каскадировались.

1 голос
/ 02 июля 2010

Нет, просто так не работает ... не уверен, что есть лучший способ объяснить это, чем это:)

jQuery был разработан для работы с элементами ... если вы делаете этодля тестирования Firebug консоли Chrome - это варианты.

То, что вы могли бы сделать, - это иметь сгенерированную на стороне сервера таблицу стилей, например, как это делает ThemeRoller и jQuery (или vanilla JS) динамически добавляет это <link> в ваш заголовок, что-то вроде: 

<link rel="stylesheet" href="myCSS.php?tdPad=.32|2" type="text/css" />

Если бы это была последняя ссылка, он бы переопределил ранее определенный стиль ... на самом делеэто точно как работает ThemeRoller.

...