Определение правила CSS CSS с использованием jQuery

Предположим, вы хотите изменить ширину многих элементов, например, для имитации таблицы. Я понимаю, что вы могли бы сделать это:Определение правила CSS CSS с использованием jQuery

$(".class").css('width', '421px');

Это изменяет встроенный style='width: 421px;' атрибут для каждого элемента. Теперь, что я хотел бы сделать: это изменить фактическое определение правила CSS:

.class { 
    width: 375px; ==[change to]==> 421px; 
}

Когда дело доходит до 100, если не 1000-гнездовой <ul> и <li>, которые должны быть изменены, то кажется, что это было бы лучше для производительности, чем попытка позволить jQuery выполнять работу с помощью метода .css().

Я нашел this example - это то, что я пытаюсь сделать:

var style = $('<style>.class { width: 421px; }</style>') 
$('html > head').append(style);

Я не пытаюсь поменять классы ($el.removeClass().addClass()), потому что я не могу иметь класс для КАЖДЫЙ оптимальной ширина (379px, 387px, 402px ..).

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

метод

источник

2012-02-09 Mike Lewis

Я действительно думаю, что вы должны написать два класса в своем CSS и добавить/удалить соответствующие, когда это необходимо. Вы не должны возиться со своей таблицей стилей в JS, она быстро станет неподъемной. – kapa

@kapa, это имеет свои пределы, потому что весь CSS должен быть определен заранее. Например, вы не могли выделить произвольные элементы nth-child: '#root> div: nth-child ('+ Nth +') {background: red; } ' –

Native JS: can jquery manipulate the global css definition of the document?

JQuery плагин Ариэль Flesler: https://github.com/flesler/jquery.rule

источник

2012-02-09 01:24:47 Joe

' document.styleSheets [0] .addRule (". Abc", "display: none;"); 'Это должно работать, спасибо! Я должен проверить плагин jQuery. Я надеюсь, что эта функциональность будет работать в jQuery! –

document.styleSheets [0] .addRule работает в Chrome, 'не функция' в FF

источник

2013-09-05 03:45:55 user2360953

Что работы для меня включают в себя пустой блок стиля в заголовке:

<style id="custom-styles"></style>

А затем манипулировать, что с чем-то вроде этого:

$('#custom-styles').text('h1 { background: red }')

Я проверил это, кажется, работает в текущей версии Chrome (хорошо, хрома - 63,0) и Firefox (57.0.4).

источник

2018-01-19 11:20:09

ответ

Смежные вопросы