Menu
is there a way in javascript/css that i can change text size of all the labels, headings, paragraphs etc on a single click and without explicitly getting element's id and then changing its font size.
what i am doing right now is that i get element's id through javascript and change its font size explicitly. To get a clear picture of what i am doing check this link or check the following code
<script type="text/javascript">
function changemysize(myvalue) {
var div = document.getElementById("mymain");
div.style.fontSize = myvalue + "px";
}
</script>
HTML code
Choose a text size:
<font size="2"><a href="javascript:void(0);" onclick="changemysize(16);">A</a></font>
<font size="4"><a href="javascript:void(0);" onclick="changemysize(20);">A</a></font>
<font size="5"><a href="javascript:void(0);" onclick="changemysize(25);">A</a></font>
<div id="mymain">
Only this text gets affected
</div>
259
Keyboard shortcuts (all browsers)Press the Ctrl and the + (plus) keys together to increase the size of the content. Press the Ctrl and the – (minus) keys together to decrease the size of the content. Press the Ctrl and the 0 (zero) keys together to reset the size of the content to the default level (normally 100%).
Show activity on this post. First, select all of the document by pressing Command ⌘ + A . Then, click on Format > Style on the Pages toolbar at the top and choose the font you like on the right sidebar.
You can use rem, which is better than em in some places because em cascades and rem does not.
With all lengths are specified in rem, you can adjust the sizes by change the font-size of the <html> element.
See also: http://snook.ca/archives/html_and_css/font-size-with-rem
65
You can change the font of a element and its children recursively to "force" it all to change:
function changeFont(element){
element.setAttribute("style",element.getAttribute("style")+";font-family: Courier New");
for(var i=0; i < element.children.length; i++){
changeFont(element.children[i]);
}
}
changeFont(document.getElementsByTagName("body")[0]);
Alternatively you can use the style atribute of the element as object:
function changeFont(element){
element.style.fontFamily="Courier New";
for(var i=0; i < element.children.length; i++){
changeFont(element.children[i]);
}
}
changeFont(document.getElementsByTagName("body")[0]);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
