Изменения размера шрифта HTML JavaScript - PullRequest
Новая
       8

Изменения размера шрифта HTML JavaScript

2 голосов
/ 25 августа 2010

Я нашел код в http://labnol.blogspot.com/2006/12/allow-site-visitors-to-change-font.html, чтобы позволить людям изменять размер шрифта и адаптировал его для использования кнопок.

<html>
<head>

<script language="JavaScript" type="text/javascript">
function changeFontSize(inc)
{
  var p = document.getElementsByTagName('*');
  for(n=0; n<p.length; n++) {
    if(p[n].style.fontSize) {
       var size = parseInt(p[n].style.fontSize.replace("px", ""));
    } else {
       var size = 16;
    }
    p[n].style.fontSize = size+inc + 'px';
   }
}
</script>

</head>
<body>
<basefont size=3/>
<p>
asdf
hhui
jnj
ghvt
</p>

<input type="button" value="+" onclick="changeFontSize(1)" />
<input type="button" value="-" onclick="changeFontSize(-1)" />

</body>
</html>

Мне известны такие функции браузера, как колесо мыши ctrl для изменения размера шрифта.

У меня есть некоторые проблемы с этим ...

1) Как можноЯ выясняю, какой должна быть константа 16, а не кодирую ее?2) Есть ли способ заставить шрифт влиять на страницы, на которые ссылается эта страница?

В другом ключе.Если для изменения размера шрифта используется что-то вроде колесика мыши, мой браузер (Firefox) запоминает размер шрифта при каждом посещении страницы даже в новых версиях браузера.Есть ли другие места, доступные для Java, чтобы установить / обнаружить эту информацию?

Ответы [ 2 ]

0 голосов
/ 25 августа 2010

Самое простое, что нужно сделать, это изменить страницу, чтобы не использовать пиксели. Если бы вы использовали ems, все, что вам нужно было бы сделать, это изменить размер шрифта элемента body, а все остальное изменилось бы.

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

0 голосов
/ 25 августа 2010

Вот функция JavaScript, которую вы можете использовать для вычисления размера 1em в пикселях: 

function getEmSize(el) {
    // If you pass in an element ID then get a reference to the element
    if (typeof el == "undefined") el = document.documentElement;

    var tempDiv = document.createElement("DIV"); 
    tempDiv.style.height = 1 + "em";
    // Just in case the content of "el" takes up it's container's height :)
    tempDiv.style.marginTop = -1 + "em";

    el.appendChild(tempDiv);
    var emSize = tempDiv.offsetHeight;
    el.removeChild(tempDiv);
    return emSize;
}

Я также написал статью о изменении размера текста при нажатии . Просто убедитесь, что вы сохранили настройку через cookie или localStorage.

Надеюсь, это полезно.

...