Changing the style of all html elements of a certain type via scripting

Printable View

Apr 26th, 2001, 01:30 PM
hall

Changing the style of all html elements of a certain type via scripting

Help! How do you change the style of all the HTML elements of a certain type via script??? For example, if I wanted all paragraph elements in a document to have blue writing I just add the following to the HTML

<style>
p {color:blue}
</style>

Now, how would I do that with script such that if a user clicked on something, a function would fire that would change all the paragraphs or any other element type of interest blue. I know how to do it for a single element, just not all the elements of a certain type. For example, the following would turn the p1 paragraph blue.

<script>
function turnblue()
{

p1.style.color=”blue”

}
</script>

<html>
<p id=main onclick=”turnblue()”>click here to turn p1 paragraph blue

<p id=p1> paragraph p1
<p id=p2> paragraph p2
<p id=p3> paragraph p3
<p id=p4> paragraph p4
<p id=p5> paragraph p5
<p id=p6> paragraph p6
<p id=p7> paragraph p7
<p id=p8> paragraph p8

</html>

Now, how would I change all paragraphs blue in the function. Thanks very much in advance.
KBH
Apr 29th, 2001, 03:14 PM
Wynd

Maybe...

Code:

<script> function turnblue() { for (var i = 0; i <= 8; i++) { p+'i'+.style.color=”blue”; } } </script>

Not sure, but it's worth a try. The idea itself should work, I might not have the code part right, someone correct me if it is not.
Jun 12th, 2001, 07:20 PM
Psyrus

Create a class and just swap it in code:

<style TYPE = "text/css">

.colorDefault {color:black;}
.colorBlue {color:blue;}

</style>

<p CLASS = "colorDefault" ONCLICK = "this.className='colorBlue';">Click to change color</p>

Chris
Jun 12th, 2001, 07:28 PM
Psyrus

More...

Just to elaborate a bit...

Any element contained in the <P> tags would have it text color changed to blue.

I'm not sure if this is what you are after though.

Chris
Jun 12th, 2001, 07:46 PM
Psyrus

This code should do it:

******************************************
<html>
<head>
<title>changing colors</title>

<style TYPE = "text/css">

p {color:black;}

</style>

<script LANGUAGE = "JavaScript">

function changeMe(){

var numTags = 0;

numTags = document.all.tags("p").length;

for( var i = 0; i < numTags; i++){

document.all.tags("P")[i].style.color = 'blue';
}

}//end function

</script>

</head>
<body>

<p ONCLICK = "changeMe();">
<br>
<b> Text within the p tags</b>
<br>
</p>
<p>Second p tag</p>
</body>
</html>
********************************************

Chris