Change <p> tag style using getElement... & javascript [Archive]

View Full Version : Change <p> tag style using getElement... & javascript

cdn2005

06-02-2005, 06:07 AM

I have the following code and it works fine:

#mainContent {
font-size: 100%;
vertical-align: top;
font-size: 100%;
padding-left: 8px;
border-bottom: 1;
}
P { font-size: 100%; COLOR: black; FONT-FAMILY: Arial, Helvetica, Sans Serif; FONT-SIZE: 10pt; }

<SCRIPT TYPE="text/JavaScript">

</SCRIPT>
</HEAD>
...
...
<BODY bgcolor="#FFFFFF">
...
..

<TD COLSPAN="3" ><DIV ALIGN="RIGHT" CLASS="noPrint"> [<A HREF="#" TARGET="_self" onClick="RA_setDOMStyle('mainContent','fontSize','100%');return false">A</A>]   [<a href="#" target="_self" onClick="RA_setDOMStyle('mainContent','fontSize','130%');return false">A+</a>]   [<A HREF="#" TARGET="_self" onClick="RA_setDOMStyle('mainContent','fontSize','160%');return false">A++</A>]</DIV></TD>
...
...
<TD COLSPAN="3"><TABLE WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0" BGCOLOR="#FFFFFF" ID="mainContent">
<TD ALIGN="left" VALIGN="top"><BR>
Ipsum Orum Ipsum Orum Ipsum Orum Ipsum OrumIpsum Orum Ipsum OrumIpsum Orum Ipsum OrumIpsum Orum Ipsum OrumIpsum Orum Ipsum Orum Ipsum Orum Ipsum Orum<BR>
<BR> </TD>
....

</BODY>
</HTML>

This works fine. I click on A to change size up two steps.

But I like to do the same using <p> tags. So if I have something like this (notice the <p> tag introduced):

<TD ALIGN="left" VALIGN="top"><p>
Ipsum Orum Ipsum Orum Ipsum Orum Ipsum OrumIpsum Orum Ipsum OrumIpsum Orum Ipsum OrumIpsum Orum Ipsum OrumIpsum Orum Ipsum Orum Ipsum Orum Ipsum Orum</p>
<BR> </TD>

then when I click the font sizer links [A] from the following command:

<TD COLSPAN="3" ><DIV ALIGN="RIGHT" CLASS="noPrint"> [<A HREF="#" TARGET="_self" onClick="RA_setDOMStyle('p','fontSize','100%');return false">A</A>]   [<a href="#" target="_self" onClick="RA_setDOMStyle('p','fontSize','130%');return false">A+</a>]   [<A HREF="#" TARGET="_self" onClick="RA_setDOMStyle('p','fontSize','160%');return false">A++</A>]</DIV></TD>
,

the script shoudl change the font size of <p> tag to 130% or 160%

Harry Armadillo

06-02-2005, 07:45 AM

The script wants an id, not a tag-name. Check out these examples:<p id="foo">Foo paragraph text here</p>
<A HREF="#" onClick="RA_setDOMStyle('foo','fontSize','100%');return false">Foo</A> <a href="#" onClick="RA_setDOMStyle('foo','fontSize','130%');return false">Foo+</a> <A HREF="#" onClick="RA_setDOMStyle('foo','fontSize','160%');return false">Foo++</A>
<div id="bar">This is<br>everthing in the <span style='color:#ff0000'>BAR</span> div!</div>
<A HREF="#" onClick="RA_setDOMStyle('bar','fontSize','100%');return false">Bar</A> <a href="#" onClick="RA_setDOMStyle('bar','fontSize','130%');return false">Bar+</a> <A HREF="#" onClick="RA_setDOMStyle('bar','fontSize','160%');return false">Bar++</A>This part of script is really lame: eval("getID.style."+args[i+1]+"=\""+args[i+2]+"\"");Change it to:getID.style[args[i+1]]=args[i+2];

SpirtOfGrandeur

06-02-2005, 07:42 PM

Even though this goes against every thing I believe. You should just rename all the elements you want to change you can do this...

return RA_setDOMStyle('bar', 'p', 'fontSize', '100%');

function RA_setDOMStyle(){
// Script by Reji Alex ?Who? -- Editted by SpiritOfGrandeur CodingForums.com -- vWhatEverNumberIWant!
if(!document.getElementById){alert('This feature requires a modern browser.\nTo use this feature, please upgrade your browser to the latest version.');return false;}
var g,args=RA_setDOMStyle.arguments;
var myInc = 3;
for(var i=0;i<args.length;i+=myInc) {
myInc = 3;
getID=document.getElementById(args[i]);
if(getID){
if ( typeof getID.style[args[i+1]] == 'undefined' ) { //trying to change all p's
var oTags = getID.getElementsByTagName(args[i+1]);
if ( oTags.length > 0 ) {
myInc = 4;
for ( var x = 0; x < oTags.length ; x++ ) {
oTags[x].style[args[i+2]]=args[i+3];
}
}

} else {
getID.style[args[i+1]]=args[i+2];
}
}
}
return false;
}

cdn2005

06-03-2005, 06:20 AM

The script wants an id, not a tag-name. Check out these examples...

Yes I realize that. But my question is whether it is possible to do the font size change for the <p> without giving it a specific ID name. The <p> tags or anyother tags for that matter. Is there a way to say that I want to change the font size of a certain tag, say <P> or <H1>, <H2> etc tags to 130% or something like that?

Kor

06-06-2005, 10:25 AM

What about?

var oP = document.getElementsByTagName('p');//the collection of <p> tags
for(var i=0;i<oP.length;i++){
oP[i].style.fontSize=.....
}

The <p> tags or anyother tags for that matter.

If you want a general way to change attributes for certain tags, specify which should be those tags... But if you want to change the attributes for all the textNodes in a page, nomatter in which tags are nested (p, h, td or simply in body) let me know and I will shou you a way using node type attribute.

cdn2005

06-09-2005, 12:47 AM

What about?

var oP = document.getElementsByTagName('p');//the collection of <p> tags
for(var i=0;i<oP.length;i++){
oP[i].style.fontSize=.....
}

If you want a general way to change attributes for certain tags, specify which should be those tags... But if you want to change the attributes for all the textNodes in a page, nomatter in which tags are nested (p, h, td or simply in body) let me know and I will shou you a way using node type attribute.

Hi Kor,

That is essentially what I am looking for. What I am looking for is a way to change the fontsize or any other style for a particular tag like:

changeStyle(tagName, fontSize) OR
changeStyle(tagName, text-decoration) where tagName could <p>, <h1> or <td>

and the function changeStyle() will essentially handle the job.

--
Reji

Kor

06-09-2005, 10:03 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function changeStyle(tag,att,val){
var el = document.getElementsByTagName(tag);
for(var i=0;i<el.length;i++){
el[i].style[att] = val;
}
}
</script>
</head>
<body>
<p>text</p>
<p>text</p>
<a href="#" onclick="changeStyle('p','color','#FF0000');return false">change text color to red</a> <br>
<a href="#" onclick="changeStyle('p','fontSize','20px');return false">change text fontSize to 20px</a>
</body>
</html>

Kor

06-09-2005, 10:25 AM

Or, if you want (it depends on what is your final goal):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var tag =['p','h1','td'];//tags array
var sty = new Array()//attribute/value 2nd array
sty[0] = ['fontSize','25px'];
sty[1] = ['textDecoration','underline']
function changeStyle(){
for (var i=0;i<tag.length;i++){
var el = document.getElementsByTagName(tag[i]);
for(var j=0;j<el.length;j++){
for(var k=0;k<sty.length;k++){
el[j].style[sty[k][0]] = sty[k][1];
}
}
}
}
</script>
</head>
<body>
<p>text p</p>
<h1>text h1</h1>
<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>text tabel</td>
</tr>
</table>
<br>
<a href="#" onclick="changeStyle();return false">set new text's style</a>
</body>
</html>