Как изменить размер шрифта пользовательского стиля CSS?

Как изменить размер шрифта пользовательского стиля css с помощью javascript?

Я видел примеры того, как заменить встроенные стили с помощью javascript, но я не могу найти, как заменить атрибут, такой как размер шрифта, в не встроенном пользовательском стиле в заголовке. Например, я хотел бы использовать javascript для изменения размера шрифта с 12 пикселей на 20 пикселей с помощью javascript.

<head>
<style>
.mystyle{
font-size:12px;
}
</style>


css head styles font-size
person techdog    schedule 25.10.2013    source источник

Ответы (4)


arrow_upward
2
arrow_downward

Вот код:

html:

<p class="mystyle">This is some text.</p>

javascript:

window.onload=function(){
document.getElementsByClassName("mystyle")[0].style.fontSize="120%";
}

Вы также можете установить размер шрифта как smaller, larger в единицах length, а также наследовать размер шрифта родительского элемента.

person Joke_Sense10    schedule 25.10.2013
comment
Это может иметь желаемый эффект, но не делает того, о чем задавался вопрос: ничего не заменяет в элементе style, а просто вводит некоторые правила, которые переопределяют его эффект. - person Jukka K. Korpela; 25.10.2013

arrow_upward
1
arrow_downward 

document.getElementsByClassName('CLASSNAME')

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

person John Smith    schedule 25.10.2013

arrow_upward
0
arrow_downward

Это позволит вам установить размер шрифта объекта.

Object.style.fontSize="value|inherit"

Так, например, если вы откроете консоль на этой странице и запустите:

document.getElementsByTagName('h1')[0].style.fontSize = '35px'

Вы увидите, что заголовок этой страницы увеличится.

person nmynarcik    schedule 25.10.2013

arrow_upward
0
arrow_downward

Чтобы изменить таблицу стилей, указанную в элементе style, вы можете изменить содержимое элемента:

s = document.getElementsByTagName('style')[0];
s.innerHTML += '.mystyle { font-size: 20px; }';

Это не изменяет существующее правило, но добавляет другое, которое переопределяет его.

В качестве альтернативы вы можете использовать свойство sheet элемента style, как определено в CSSOM:

var sh = document.getElementsByTagName('style')[0].sheet;
sh.insertRule('.mystyle { font-size: 20px; }', sh.cssRules.length);

Если вы действительно хотите заменить правило в элементе style, а не просто переопределить его, вам нужно будет найти его, пройтись по объекту cssRules и получить индекс, затем вызвать deleteRule, а затем insertRule.

person Jukka K. Korpela    schedule 25.10.2013