Programming Forums > Web Development and Design > JavaScript and Client-Side Browser Scripting

Sane · May 23rd, 2006, 7:48 PM

How do I change the style/class of an object with javascript?

/* GET AN OBJECT */

var objects = new Array();
var type = 0;
if (document.getElementById)
{
    type = 1;
}
else if (document.all)
{
    type = 2;
}
else if (document.layers)
{
    type = 3;
}
function get_object(idname)
{
    if (typeof(objects[idname]) == "undefined")
    {
        if (type == 1)
        {
            objects[idname] = document.getElementById(idname);
        }
        else if (type == 2)
        {
            objects[idname] = document.all[idname];
        }
        else if (type == 3)
        {
            objects[idname] = document.layers[idname];
        }
    }
    return objects[idname];
}

Then I try to change the class/style like so:

(Toggle Plain Text)

x = get_object('some_id');
x.style = 'background-color: #000';

I get the error: "setting a property that has only a getter"

And if I try class instead of style, it doesn't like me using the word class in the javascript.

Sane · May 23rd, 2006, 8:12 PM

Oh damn. Sorry I didn't find this out earlier. There is a method called "setAttribute" that lets me do just that. Sorry for the pointless thread.

(Toggle Plain Text)

x = get_object('some_id')
x.setAttribute('style', 'background-color: #000');

EDIT

There's still a problem. It doesn't want to work in Internet Explorer: http://saney.ath.cx:8080/vle/?page=temp

It works in Firefox. The case for the current situation is supposed to be highlighted.

DaWei · May 23rd, 2006, 8:20 PM

You can set the style, too, but script uses different terminology. You would use:

myObject.style.backgroundColor = "#000000";

In the general case, you remove the hyphen and capitalize the word following.

Sane · May 23rd, 2006, 9:33 PM

What if I want to change the class? Javascript won't like me using that word. Still can't get it to work in Internet Explorer.

DaWei · May 23rd, 2006, 9:51 PM

I've never tried changing the class, but surely one can. Why would you want to? At any rate, I'll dink with it a bit later. I can always use another item of information. Helps replace the forty-leben things I forget every day.

EDIT: Says heah that class is a reserved identifier. You have a number of options, though, ranging from server side, to client-side construction using document.write, to restyling attributes associated with the class style.

Sane · May 23rd, 2006, 10:57 PM

I have a feeling that the problem with using setAttribute, is that it's modifying the reference to the object, not the actual object itself. Any suggestions?

Some people are telling me it's not working in their version of Firefox either.

Here's the link once more: http://saney.ath.cx:8080/vle/?page=temp

Arevos · May 24th, 2006, 4:07 AM

As DaWei says, it's:

(Toggle Plain Text)

object.style.xxxx = "yyyy";

for styles and:

(Toggle Plain Text)

object.className = "zzzz";

for classes.

setAttribute is non-standard javascript, I believe.

Cerulean · May 24th, 2006, 3:42 PM

Nono, setAttribute is standard JavaScript. IE doesn't like standards, heh.
As for your original get_object function - if / else ifs in interpreted languages are costly and setting a flag for the right kind of element getting function is definitely not the right way to go about it. How about something like this:

(Toggle Plain Text)

var getObject = function() {};
if (document.getElementById) {
    getObject = document.getElementById;
}
else if (document.all) {
    getObject = function(s) { return document.all[s]) };
}
var foo = getObject("foo");

etc..
Another note is to make sure you're not making inferences about functionality supported by the browser just by checking to see if it supports document.all or document.layers or some such. It makes no sense to do so and is akin to browser detection. You should always check for the object you want to use, not a browser that you know supports it; else your scripts will be severely crippled in a bunch of browsers.

Ooble · May 24th, 2006, 8:25 PM

I figure that using document.getElementById works 99% of the time (I made that statistic up, just so you know), so as long as you make sure the page degrades gracefully, you can just use that without a problem.

Oh, and document.getElementById("myElement").style.backgroundColour works perfectly fine in Internet Explorer 6.

Cerulean · May 25th, 2006, 2:17 PM

(Toggle Plain Text)

document.getElementById("myElement").style.backgroundColour

Even with that (correct here, *high 5* for the UK) spelling of "colour"? Heh

document.getElementById is supported in the vast majority of browsers today, yes. It probably is useless to code around it when the meat of your JS will most likely do something that won't work in the old browsers that don't support document.getElementById anyways. As for caching the output of those functions, that too probably isn't wise. It's not as if the browser is doing anything intensive when it passes you a reference to an element - it's probably just looking it up in a hash table (much like you are doing), except you are doing it in slow JavaScript and it's doing it in some fast compiled language.

May 23rd, 2006, 7:48 PM	#1
Sane Programming Guru Join Date: Apr 2005 Location: Waterloo, Ontario Posts: 2,024 Rep Power: 6	How To Change The Style/Class Of An Object? How do I change the style/class of an object with javascript? (Toggle Plain Text) /* GET AN OBJECT / var objects = new Array(); var type = 0; if (document.getElementById) { type = 1; } else if (document.all) { type = 2; } else if (document.layers) { type = 3; } function get_object(idname) { if (typeof(objects[idname]) == "undefined") { if (type == 1) { objects[idname] = document.getElementById(idname); } else if (type == 2) { objects[idname] = document.all[idname]; } else if (type == 3) { objects[idname] = document.layers[idname]; } } return objects[idname]; } / GET AN OBJECT */ var objects = new Array(); var type = 0; if (document.getElementById) { type = 1; } else if (document.all) { type = 2; } else if (document.layers) { type = 3; } function get_object(idname) { if (typeof(objects[idname]) == "undefined") { if (type == 1) { objects[idname] = document.getElementById(idname); } else if (type == 2) { objects[idname] = document.all[idname]; } else if (type == 3) { objects[idname] = document.layers[idname]; } } return objects[idname]; } Then I try to change the class/style like so: (Toggle Plain Text) x = get_object('some_id'); x.style = 'background-color: #000'; x = get_object('some_id'); x.style = 'background-color: #000'; I get the error: "setting a property that has only a getter" And if I try class instead of style, it doesn't like me using the word class in the javascript.

May 23rd, 2006, 8:12 PM	#2
Sane Programming Guru Join Date: Apr 2005 Location: Waterloo, Ontario Posts: 2,024 Rep Power: 6	Oh damn. Sorry I didn't find this out earlier. There is a method called "setAttribute" that lets me do just that. Sorry for the pointless thread. (Toggle Plain Text) x = get_object('some_id') x.setAttribute('style', 'background-color: #000'); x = get_object('some_id') x.setAttribute('style', 'background-color: #000'); EDIT There's still a problem. It doesn't want to work in Internet Explorer: http://saney.ath.cx:8080/vle/?page=temp It works in Firefox. The case for the current situation is supposed to be highlighted.

May 23rd, 2006, 8:20 PM	#3
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	You can set the style, too, but script uses different terminology. You would use: myObject.style.backgroundColor = "#000000"; In the general case, you remove the hyphen and capitalize the word following. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

May 23rd, 2006, 9:51 PM	#5
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	I've never tried changing the class, but surely one can. Why would you want to? At any rate, I'll dink with it a bit later. I can always use another item of information. Helps replace the forty-leben things I forget every day. EDIT: Says heah that class is a reserved identifier. You have a number of options, though, ranging from server side, to client-side construction using document.write, to restyling attributes associated with the class style. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers Last edited by DaWei; May 23rd, 2006 at 10:18 PM.

May 24th, 2006, 4:07 AM	#7
Arevos Programming Guru Join Date: Aug 2005 Location: England Posts: 1,499 Rep Power: 5	As DaWei says, it's: (Toggle Plain Text) object.style.xxxx = "yyyy"; object.style.xxxx = "yyyy"; for styles and: (Toggle Plain Text) object.className = "zzzz"; object.className = "zzzz"; for classes. setAttribute is non-standard javascript, I believe.

May 23rd, 2006, 9:33 PM	#4
Sane Programming Guru Join Date: Apr 2005 Location: Waterloo, Ontario Posts: 2,024 Rep Power: 6	What if I want to change the class? Javascript won't like me using that word. Still can't get it to work in Internet Explorer.

May 23rd, 2006, 10:57 PM	#6
Sane Programming Guru Join Date: Apr 2005 Location: Waterloo, Ontario Posts: 2,024 Rep Power: 6	I have a feeling that the problem with using setAttribute, is that it's modifying the reference to the object, not the actual object itself. Any suggestions? Some people are telling me it's not working in their version of Firefox either. Here's the link once more: http://saney.ath.cx:8080/vle/?page=temp

May 24th, 2006, 3:42 PM	#8
Cerulean Professional Programmer Join Date: Apr 2005 Location: London, England Posts: 459 Rep Power: 4	Nono, setAttribute is standard JavaScript. IE doesn't like standards, heh. As for your original get_object function - if / else ifs in interpreted languages are costly and setting a flag for the right kind of element getting function is definitely not the right way to go about it. How about something like this: (Toggle Plain Text) var getObject = function() {}; if (document.getElementById) { getObject = document.getElementById; } else if (document.all) { getObject = function(s) { return document.all[s]) }; } var foo = getObject("foo"); var getObject = function() {}; if (document.getElementById) { getObject = document.getElementById; } else if (document.all) { getObject = function(s) { return document.all[s]) }; } var foo = getObject("foo"); etc.. Another note is to make sure you're not making inferences about functionality supported by the browser just by checking to see if it supports document.all or document.layers or some such. It makes no sense to do so and is akin to browser detection. You should always check for the object you want to use, not a browser that you know supports it; else your scripts will be severely crippled in a bunch of browsers.

May 24th, 2006, 8:25 PM	#9
Ooble I eat cake for breakfast. Join Date: Jul 2004 Location: In my box. Posts: 4,434 Rep Power: 9	I figure that using document.getElementById works 99% of the time (I made that statistic up, just so you know), so as long as you make sure the page degrades gracefully, you can just use that without a problem. Oh, and document.getElementById("myElement").style.backgroundColour works perfectly fine in Internet Explorer 6. __________________ Me :: You :: Them

May 25th, 2006, 2:17 PM	#10
Cerulean Professional Programmer Join Date: Apr 2005 Location: London, England Posts: 459 Rep Power: 4	(Toggle Plain Text) document.getElementById("myElement").style.backgroundColour document.getElementById("myElement").style.backgroundColour Even with that (correct here, high 5 for the UK) spelling of "colour"? Heh document.getElementById is supported in the vast majority of browsers today, yes. It probably is useless to code around it when the meat of your JS will most likely do something that won't work in the old browsers that don't support document.getElementById anyways. As for caching the output of those functions, that too probably isn't wise. It's not as if the browser is doing anything intensive when it passes you a reference to an element - it's probably just looking it up in a hash table (much like you are doing), except you are doing it in slow JavaScript and it's doing it in some fast compiled language.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Programming Forums > Web Development and Design > JavaScript and Client-Side Browser Scripting

How To Change The Style/Class Of An Object?