...

View Full Version : getElementsByTagName



Nezky
07-05-2011, 04:13 PM
Hello CodingForums.

I have a script to increase the fontsize on my website.. It works perfectly, but currently it's only targetting my <p> tag and I want it to target my h2 and h3 aswell.. How can I do this?



var min=8;
var max=18;
function increaseFontSize() {

var p = document.getElementsByTagName('p');
for(i=0;i<p.length;i++) {

if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {

var s = 12;
}
if(s!=max) {

s += 1;
}
p[i].style.fontSize = s+"px"

}
}
function decreaseFontSize() {
var p = document.getElementsByTagName('p');
for(i=0;i<p.length;i++) {

if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {

var s = 12;
}
if(s!=min) {

s -= 1;
}
p[i].style.fontSize = s+"px"

}
}

Philip M
07-05-2011, 04:29 PM
Give all the elements or tags you wish to resize a common class name. Then use css.

Or just place <p> tags around the <h2> tags.

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

Nezky
07-05-2011, 04:43 PM
putting p tag around my h2 is not working..

I'm surprised there's not some way to just add more tags under this line

var p = document.getElementsByTagName('p');

like

var p = document.getElementsByTagName('p,h2,h3');

I would prefer not to use classes as it would become a mess with some of the classes I have already

Nezky
07-05-2011, 07:02 PM
No one else has a solution to this? :(

sunfighter
07-05-2011, 07:13 PM
Give all the elements or tags you wish to resize a common class name. Then use css.


What was wrong with this?

Side Note: Modern browsers do this.

jmrker
07-06-2011, 02:23 AM
Is this what you are trying to do? :confused:


<!DOC HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">

function increaseFontSize(tag,tagmax) {
var p = document.getElementsByTagName(tag);
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) { var s = parseInt(p[i].style.fontSize.replace("px","")); }
else { var s = tagmax; }
if(s!=tagmax) { s += 1; }
p[i].style.fontSize = s+"px"
}
}
function decreaseFontSize(tag,tagmin) {
var p = document.getElementsByTagName(tag);
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) { var s = parseInt(p[i].style.fontSize.replace("px","")); }
else { var s = tagmin; }
if(s!=tagmin) { s -= 1; }
p[i].style.fontSize = s+"px"
}
}
window.onload = function() {
increaseFontSize('H1',48);
increaseFontSize('H2',36);
increaseFontSize('P',12);
}
</script>

</head>
<body>
<button onclick="increaseFontSize('H1',48)">Increase &lt;H1&gt;</button>
<button onclick="decreaseFontSize('H1',36)">Decrease &lt;H1&gt;</button>
<button onclick="increaseFontSize('H2',36)">Increase &lt;H2&gt;</button>
<button onclick="decreaseFontSize('H2',24)">Decrease &lt;H2&gt;</button>
<br>
<button onclick="increaseFontSize('P',12)">Increase &lt;P&gt;</button>
<button onclick="decreaseFontSize('P',8)">Decrease &lt;P&gt;</button>

<h1>This is a &lt;H1&gt; section</h1>
<h2>This is a &lt;H2&gt; section</h2>
<p>This is one section</p>
This is the contents of the 1st section.

<h1>This is a &lt;H1&gt; section</h1>
<h2>This is a &lt;H2&gt; section</h2>
<p>This is another section</p>
This is the contents of the 2nd section.

<h1>This is a &lt;H1&gt; section</h1>
<h2>This is a &lt;H2&gt; section</h2>
<p>This is the last section</p>
This is the contents of the 3rd section.

</body>
</html>

sunfighter
07-07-2011, 08:48 PM
jmrker it works for me in FF and IE.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum