Изменить размер шрифта с помощью кнопки - PullRequest
Новая
       34

Изменить размер шрифта с помощью кнопки

0 голосов
/ 30 ноября 2018

Я пытался изменить размер шрифта сообщений в моем блоге с помощью кнопки ... Примерно так: 

<p><a href="#" onclick="document.body.style.fontSize='x-large';">BIG</a></p>

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

Мне кажется, проблема в том, что текст в сообщениях находится между следующими тегами: 

 <span style="font-size: large;">Blah blah blah</span>

Таким образом, можно использовать кнопку, чтобы изменить размер этого текста на"large", "x-large" и "xx-large"?

Ответы [ 2 ]

0 голосов
/ 18 декабря 2018

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

<script type="text/javascript">function
SuperGrande() {var ss = document.querySelectorAll(".entry-content span, 
.entry-content div");
for (var n=0;n<ss.length;n++) ss[n].style.fontSize="xx-large";}
</script>

<script type="text/javascript">function
Grande() {var ss = document.querySelectorAll(".entry-content span, .entry- 
content div");
for (var n=0;n<ss.length;n++) ss[n].style.fontSize="x-large";}
</script>

<script type="text/javascript">function
Normal() {var ss = document.querySelectorAll(".entry-content span, .entry- 
content div");
for (var n=0;n<ss.length;n++) ss[n].style.fontSize="large";}
</script>

<a href="javascript:void(0);" onclick="Normal()" id="plustext">Normal</a> | 
<a href="javascript:void(0);" onclick="Grande()" id="minustext">Grande</a> | 
<a href="javascript:void(0);" onclick="SuperGrande()" id="minustext">Muy 
Grande</a>
0 голосов
/ 30 ноября 2018

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

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

Что-то такое простое, как: 

.largeText {
  font-size: large;
}

.xLargeText {
  font-size: x-large;
}

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

...