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

Question

Я знаю, как применять css на одном теге (или меняя класс на нем), но ЭТО НЕ ЧТО Я ПРОШУ!

Я хотел бы изменить атрибут внутри класса CSS, не касаясь элемента, в котором применяется класс.

Другими словами, если это CSS

.myclass { 
    font-size: 14px; 
    color: #aab5f0; 
} 

и это HTML

<span id="test" class="myclass"> foo bar </span> 

увеличить шрифт размаху теге я хочу изменить содержимое класса и НЕ делать что-то вроде

var fontsize = parseInt($('#test').css('font-size').replace(/[^-\d\.]/g, '')); 
fontsize += 10; 
$('#test').css('font-size', fontsize+'px'); 

Я хочу, чтобы класс становится

.myclass { 
     font-size: 18px; 
     color: #aab5f0; 
    } 

Есть ли способ изменить фактический класс через Javascript?

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

Answer 1

Я думаю, что в идеале вы должны определить базу размер шрифта на элементе html или body. Все остальные размеры шрифта в CSS должны быть по отношению к этому «мастер» размер шрифта, например, так:

body { 
    font-size: 12px; 
} 

[everything else] { 
    font-size: 1.0em; 
} 

Затем, когда вы регулируете размер шрифта тела через jQuery.css(), то другие элементы будут автоматически корректировать свой размер относительно родителя.

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

Вы не должны использовать body уровень, можно определить базовый размер шрифта DIV или другой контейнер и использовать его в качестве родителя вместо этого.

Существует рабочий образец этой техники here.

Answer 2

Мой комментарий несмотря на это, посмотрите на этот вопрос: Setting CSS pseudo-class rules from JavaScript

Изменение класса и «настройки правил псевдо-класса» достигается тем же способом.

@Box9's answer, вероятно, один вы должны реально использовать:

я бросил вместе с small library for this, так как я считаю, что допустимы случаи использования для манипулирования таблиц стилей в JS.

Answer 3

Не нужно менять сам класс. Чтобы переопределить поведение, просто добавьте другой класс в существующий или полностью измените его. Я покажу первый вариант:

.myclass { 
    font-size: 14px; 
    color: #aab5f0; 
} 
.myclass.override { 
    font-size: 12px; 
} 

И тогда все, что вам нужно сделать с JavaScript, чтобы переключить класс перенастройки.Таким образом, это также намного лучше, поскольку вся презентация выполняется в CSS.

Answer 4

Поскольку очевидно, что вы используете jQuery, см. Функции и removeClass.

$('#test').removeClass('myClass').addClass('yourClass'); 

Answer 5

Просто JQuery:

$('#test').attr('class','bigFont'); 

или родной JS:

document.getElementById('test').className ='bigFont'; 

ОБНОВЛЕНО

var size = [ 10 , 20 , 30 ] ; 
var i =0; 
$('#test').css('font-size',size[i]+'px'); 
i = (i+1)%size.length ; 

Answer 6

ищет то же самое.

Это было мое решение

https://jsfiddle.net/sleekinteractive/0qgrz44x/2/

HTML 

<p>The Ants in France stay mainly on the Plants</p> 

CSS 

p{ 
font-family:helvetica; 
font-size:15px; 
} 

JAVASCRIPT (uses jQuery) 

function overwrite_css(selector,properties){ 

// selector: String CSS Selector 
// properties: Array of objects 

var new_css = selector + '{'; 

for(i=0;i<properties.length;i++){ 

new_css += properties[i].prop + ':' + properties[i].value + ';'; 

} 

new_css += '}'; 

$('body').append('<style>' + new_css + '</style>'); 

} 

overwrite_css('p',Array({prop: 'font-size', value: '22px'})); 
overwrite_css('p',Array({prop: 'font-size', value: '11px'})); 
overwrite_css('p',Array({prop: 'font-size', value: '66px'})); 

// ends on 66px after running all 3. comment out lines to see changes