using javascript to change specific css parameter

**dtang4** · Nov 5, 2003, 15:30

Hey, I would like to achieve something to this effect...

Code:

document.getElementById('hello').style.border-top = "2px red solid";

What I'm trying to do is just change the top border color of something I defined with css. The code above of course didn't work.. heh. How would I do it?

Thanks,
dave

**adios** · Nov 5, 2003, 15:49

document.getElementById('hello').style.borderTop = "2px red solid";

I see you've taken the 'I think I'll type this in & see what error message I get' approach to scripting.

I like that.

**dtang4** · Nov 5, 2003, 16:07

Awesome. Thanks for the help.

Can you point me to a resource that'll list everything I can plus after "style."? Ie. every possible par for style.par = "something"

Yes haha... my strategy is somewhat unrefined, heh

**adios** · Nov 5, 2003, 16:18

Good read: http://www.westciv.com/style_master/.../css_tutorial/

http://www.pageresource.com/dhtml/indexcss.htm
http://academ.hvcc.edu/~kantopet/css/index.php

**blufive** · Nov 5, 2003, 16:40

Theoretically, you should be able to access all CSS properties, just like you were trying to. You're nearly there, but you're missing one vital bit of information: hyphens are invalid characters in javascript identifiers.

This means that, when attempting to access a property that, like border-top, has a hyphen in the name, you can't just use the regular CSS property name. Therefore, when accessed this way, you have to use a different property name.

But what's the property name?

Take the name of the CSS property you want to access
capitalise the first letter of each word after the first
Remove the hyphens

Thus, border-top becomes borderTop; list-style-type becomes listStyleType; background-color becomes backgroundColor, and so on.

**dtang4** · Nov 6, 2003, 12:19

Oh wow!

Awesome, thanks a lot for the info. That'll give me much more power in coding now.. muAhaHa

**dtang4** · Nov 8, 2003, 08:40

Originally Posted by blufive

But what's the property name?

Take the name of the CSS property you want to access
capitalise the first letter of each word after the first
Remove the hyphens

Thus, border-top becomes borderTop; list-style-type becomes listStyleType; background-color becomes backgroundColor, and so on.

How would I set the background image? I tried

HTML Code:

document.getElementById('id').backgroundImage = "url to image"; //and
document.getElementById('id').backgroundImage = "url('url to image')";

Both of which didn't appear to work.

**tss68nl** · Nov 8, 2003, 10:20

Take a look at http://msdn.microsoft.com/library/de...ence_entry.asp for a nice overview of the objects and their respective properties. You can go to the object list, pick a particular object, and it'll then serve you with both the in-tag properties, CSS properties, and scripting access to the CSS properties.

Ofcourse it's cut to microsoft browsers, but even then it's still a very good overview of a lot of properties available in almost all browsers. I never needed anything else than that.

**dtang4** · Nov 8, 2003, 10:26

Wow, that resource is rocking.

Thanks a lot!

**adios** · Nov 8, 2003, 11:45

Well - first of all: where's that Style object?

Code:

document.getElementById('id').style.background = "url(url to image)";

You can use the background property: it includes all the background properties, in one place, explained here. .backgroundColor will do as well. Your other problem: the entire string - "url(url to image)" - goes inside the quotes (it's the property's value) - and it's one, not two, strings.

Disagree about the msdn docs; Microsoft has tons of non-standard, proprietary items. If you learn by referring to them, you'll spend a lot of time wondering why things don't work elsewhere.

http://academ.hvcc.edu/~kantopet/css/index.php

**dtang4** · Nov 8, 2003, 12:10

Oops, forgot to type the style part, heh.

Great, thanks a lot! I'll check out that link.

**tss68nl** · Nov 8, 2003, 13:51

Microsoft also only halfly implement normal CSS standards, hence making the reverse true: By using msdn you make sure you dont have to wonder why it doesnt work in IE. For example the :hover psuedo class and the CSS identifiers for siblings etc. I rather have it right the first time for 90% of the visitors, then polish to make it work for the minorities as well

Anyways, use what you like, and lets all hope all but one browser dies soon, so we can finally have a peaceful and easy world

**Markdidj** · Nov 8, 2003, 14:13

Is there a way you can set the CSS in javascript before the object has been applied without using document.write(<style>............................)
I have browser specific CSS, no scroll-bars, rounded corners, rotating (turning) filters etc.....

**adios** · Nov 8, 2003, 19:52

I rather have it right the first time for 90% of the visitors, then polish to make it work for the minorities as well

Maybe - but the trend is towards standards-compliance, and if you're learning this from scratch, it's better - imo - to learn what works cross-platform from the outset, rather than 'fixing' one thing after another when you discover which 'solutions' are M$pecific.

Often it's not just a matter of 'polishing' something (or did you mean 'Polish minorities' ?)

Seen enough

on boards like this to know the routine...(HELP!!! Script won't work in Netscape...emergency!!!)

http://www.zeldman.com/daily/0203a.shtml#debacle

**tss68nl** · Nov 9, 2003, 06:07

Markdidj:
Well, you can ofcourse build the CSS in memory, there are functions and objects available for that purpose. After that you can just create new html elements and then using adjacent/beforeEnd inserts to put them in the html next to/inside a placeholder HTML element.

adios:
I dont think you have been reading well. By following the docs you gave you will run into the very same compatibility problems, but then with IE not working. They are not cross-platform (you meant cross browser probably), nor cross-browser, since IE just wont take what you write.

The only thing that I want to point out really is that none of the two aproaches is better in essence, since they will both leave a browser in failure.

I quoted the percentage as a means of outlining why my personal preference goes out to writing for IE. I can imagine there are reasons why one would like to start out with Netscape (prolly standards complying) code and then polishing/patching it for IE tho. I was curious about them really.

**dtang4** · Nov 13, 2003, 10:17

Wow, this topic is still on the first page! haha

Ok, I have another related question. I want to change the link colour of the id. This is what I tried...

Code:

 
document.getElementById('idname').style.a.color = "black";
document.getElementById('idname').a.style.color = "black";

both of which didn't work. How would I go about doing this?

(Sorry if this is self-evident.. heh)

**adios** · Nov 13, 2003, 12:09

I want to change the link colour of the id.

Let's see the HTML you're referring to...

**dtang4** · Nov 13, 2003, 12:28

Sure.

Let's say this is my style sheet code:

Code:

#main_nav {width:100%; background:#FF6600; font-size:10px; padding: 4px 4px 4px 60px; color:#FFFFCC; }
#main_nav a {margin:1px; padding:3px; color: white; text-decoration:none}

It is being applied here:

Code:

 <div id=main_nav> 
hello, here is a <a href=http://google.com>link to google</a>.
</div>

I would like a javascript function that will change the color of the "link to google" text.

**adios** · Nov 13, 2003, 12:44

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<style type="text/css">

#main_nav {width:100%; background:#FF6600; font-size:10px; padding: 4px 4px 4px 60px; color:#FFFFCC; }
#main_nav a {margin:1px; padding:3px; color: white; text-decoration:none}

</style>

</head>
<body>
<div id=main_nav>hello, here is a <a id="googlelink" href=http://google.com>link to google</a>.</div>
<a href="#null" onclick="document.getElementById('googlelink').style.color='#0f0';return false">change link color</a>
</body>
</html>

**dtang4** · Nov 13, 2003, 13:33

Is that the only way to do it?

Cause, I plan to have a lot of links. I would then need to create an id for each link. Is there some anomaly to...
document.getElementById('main_nav').style.aColor = "black";
that works.. heh.

**adios** · Nov 13, 2003, 13:44

Code:

var main_nav = document.getElementById('main_nav');
var nav_links = main_nav.getElementsByTagName('a');
for (var a_link, i = 0; i < nav_links.length; ++i)
{
	a_link = nav_links.item(i);
	a_link.style.color = '#0f0';
}

**dtang4** · Nov 13, 2003, 15:47

Oh, nice. Thanks a lot!

The SitePoint Forums have moved.

User Tag List

Thread: using javascript to change specific css parameter

Thread Tools

Display

using javascript to change specific css parameter

change the link colour of the id

Bookmarks

Bookmarks

Posting Permissions