Categories: MSDN / DotNet / Java / Scripts / Linux / PHP Ask - La ask - La Answer
Programmers Tech >> Developer Tech >> Web

dynamically altering element properties

How does one modify attributes, such as font color, for an entire set of HTML
elements? If I want every <h1> element to change to a different color, how
do I address every <h1> element on a page at once?
[224 byte] By [Berry] at [2007-11-9 16:15:09]
«« dynamically altering element properties
»» FLY-IN FEATURE
# 1 Re: dynamically altering element properties
Hi Barry,

"Berry" <buckdharwin@hotmail.com> wrote in message news:3ccee017@10.1.10.29...
>
> How does one modify attributes, such as font color, for an entire set of HTML
> elements? If I want every <h1> element to change to a different color, how
> do I address every <h1> element on a page at once?

Use a cascading style sheet (CSS). For example, create a text file called
styles.css with the following code in it:

h1{color: #FF0000;}

Put a reference to the CSS file in the <head> section of your HTML page as
follows:

<link rel="stylesheet" type="text/css" href="styles.css">

This will change all <h1> elements to red.

--
Constance Petersen, dev-archive newsgroup section leader
SoftMedia Artisans, Inc.
http://www.smartisans.com
For useful, usable software and Web sites
Featured Web design: http://www.keweenawnow.com/
--
Please reply in the newsgroup so everyone can benefit
Constance J. Petersen at 2007-11-11 23:36:50 >
# 2 Re: dynamically altering element properties
Hi, and thanks for the response.

I should've made my intent more specific. I know how to set style attributes,
but I'm having trouble DYNAMICALLY altering them.

I am coding a shell for a general-purpose corporate site. One of the features
is a user-preferences page, in which the user can set whether he wishes to
see Flash intros, animated graphics, monochrome or high-contrast color schemes,
etc. I have a "colors" popup window that permits the user to change the
RGB components of various elements via slider controls. I have had success
getting the color changes to stick with elements such as text color, because
textcolor is a property of the body element that I can reach through script.
But there is no such property through which I can script changes to <H1>,
<H2> and <H3>.

The problem is complicated by the fact that I permit the users to cycle these
three elements between different horizontal positionings on the screen.
This is to allow them to see how elements of different colors look superposed
over different portions of a varigated background image. I do this by changing
the .innertext of the <td> elements into which the <H> elements are stuffed.

I originally was setting the .color of the <td> elements to get the <H>'s
to change color, but this is insufficient to track heading elements that
are cycling between different table cells. Mayhap I can rely on indexing
the <td> elements as an array and adjusting the subscript in response to
a cycle event...I haven't quite gotten this to work yet, though, and I feel
that a general-purpose element-modification solution would be better all
around.

A color-modification page might seem trivial in the context of a totally-data-driven
corporate shell, but it is actually likely to become a major design tool
for me as I move on to adapt the shell to different purposes, since I can
use it to prototype Styles in real time...

Anyway, thanks for the advice...

"Constance J. Petersen" <constance@smartisans.com> wrote:
>Hi Barry,
>
>"Berry" <buckdharwin@hotmail.com> wrote in message news:3ccee017@10.1.10.29...
>>
>> How does one modify attributes, such as font color, for an entire set
of HTML
>> elements? If I want every <h1> element to change to a different color,
how
>> do I address every <h1> element on a page at once?
>
>Use a cascading style sheet (CSS). For example, create a text file called
>styles.css with the following code in it:
>
>h1{color: #FF0000;}
>
>Put a reference to the CSS file in the <head> section of your HTML page
as
>follows:
>
><link rel="stylesheet" type="text/css" href="styles.css">
>
>This will change all <h1> elements to red.
>
>--
>Constance Petersen, dev-archive newsgroup section leader
>SoftMedia Artisans, Inc.
>http://www.smartisans.com
>For useful, usable software and Web sites
>Featured Web design: http://www.keweenawnow.com/
>--
>Please reply in the newsgroup so everyone can benefit
>
>
Berry at 2007-11-11 23:37:56 >
# 3 Re: dynamically altering element properties
"Berry" <buckdharwin@hotmail.com> wrote in message news:3cd2e69c@10.1.10.29...
> I should've made my intent more specific. I know how to set style attributes,
> but I'm having trouble DYNAMICALLY altering them.

No, I just didn't read your subject carefully. Hopefully someone else will pick
up on this. I don't do much javascripting.

--
Constance Petersen, dev-archive newsgroup section leader
SoftMedia Artisans, Inc.
http://www.smartisans.com
For useful, usable software and Web sites
Featured Web design: http://www.keweenawnow.com/
--
Please reply in the newsgroup so everyone can benefit
Constance J. Petersen at 2007-11-11 23:38:51 >
# 4 Re: dynamically altering element properties
You need to get a reference to a stylesheet in the document; then you can
add new rules. For example, this sample document adds a rule that changes
the color of the h1 elements on the page when you click the button. New
rules, by default, appear last in the rule list, thus they override earlier
rule definitions for the same element(s). Added rules apply immediately, so
you'll see the color change when the stylesheet appends the new rule.

Russell Jones
Executive Editor,
dev-archive.com

*************************************
SAMPLE DOCUMENT

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<style type="text/css">
h1 {color: #0000FF}
</style>
<script type="text/javascript" language="JavaScript">
function addStyle() {
myStyleSheet=document.styleSheets(0);
myStyleSheet.addRule("h1", "color: red");
}
</script>

</HEAD>
<BODY>

<h1>This is header 1</h1>
<h1>This is header 2</h1>
<input type="button" value="Add Style" onclick="addStyle()">
</BODY>
</HTML>

**********************************
Russell Jones at 2007-11-11 23:39:57 >
# 5 Re: dynamically altering element properties
"Russell Jones" <arj1@northstate.net> wrote in message
news:3cd7df50$1@10.1.10.29...
> You need to get a reference to a stylesheet in the document; then you can
> add new rules.

Cool--Thanks.

--
Constance Petersen, dev-archive newsgroup section leader
SoftMedia Artisans, Inc.
http://www.smartisans.com
For useful, usable software and Web sites
Featured Web design: http://www.keweenawnow.com/
--
Please reply in the newsgroup so everyone can benefit
Constance J. Petersen at 2007-11-11 23:40:56 >
# 6 Re: dynamically altering element properties
Indeed--thanks to you both. This is just what I was looking for.

"Constance J. Petersen" <constance@smartisans.com> wrote:
>"Russell Jones" <arj1@northstate.net> wrote in message
>news:3cd7df50$1@10.1.10.29...
>> You need to get a reference to a stylesheet in the document; then you
can
>> add new rules.
>
>Cool--Thanks.
>
>--
>Constance Petersen, dev-archive newsgroup section leader
>SoftMedia Artisans, Inc.
>http://www.smartisans.com
>For useful, usable software and Web sites
>Featured Web design: http://www.keweenawnow.com/
>--
>Please reply in the newsgroup so everyone can benefit
>
>
>
Berry at 2007-11-11 23:42:01 >
Developer Tech
Web

Developer Tech

All Classified

Developer Tech New Topic

Developer Tech Hot Topic