Set the bgcolor attribute value

**Rain Lover** · 07-22-2011, 03:02 PM

Hi,

The following doesn't work:

Code:

<!DOCTYPE HTML>
<title>Test</title>
<embed id="foo" src="http://www.w3schools.com/media/bookmark.swf" width="400" height="40" type="application/x-shockwave-flash" />

<script type="text/javascript">
document.getElementById("foo").setAttribute("bgcolor", "#00FF00");
</script>

But if you change setAttribute to ("width", "800"), it works with no problem! What am I missing?

Any help is appreciated!
Mike

**jscheuer1** · 07-22-2011, 03:44 PM

Code:

document.getElementById("foo").setAttribute("bgColor", "#00FF00");

or:

Code:

document.getElementById("foo").setAttribute("bgcolor", "#00FF00", 0);

The attribute is technically bgColor, not bgcolor. The first solution uses the exact case, the second (IE only) uses the 0 parameter to tell the browser to ignore case.

But browsers vary. Firefox won't accept even a width change. Opera will accept the width but not the bgColor, regardless of how its expressed. Chrome will not do the bgColor, didn't check the width in it.

Perhaps if you used an object tag (which is standard in more DOCTYPES) instead . . . but then it would be a param tag within the object tag. If I have more time I'll look into it.

Added Later:

It doesn't get better, just different:

Code:

<!DOCTYPE HTML>
<title>Test</title>
<object id="foo" data="http://www.w3schools.com/media/bookmark.swf" width="400" height="40" type="application/x-shockwave-flash">
<param name="movie" value="http://www.w3schools.com/media/bookmark.swf"></param>
</object>

<script type="text/javascript">
var bg = document.createElement('param');
bg.name = 'bgColor';
bg.value = '#00FF00';
document.getElementById("foo").appendChild(bg);
</script>

Now only Firefox, Chrome, Safari, and IE 9 will do it.

**coothead** · 07-22-2011, 03:46 PM

Hi there Rain Lover,

the bgcolor attribute has been deprecated in favour of CSS for quite sometime now and is probably the reason that it does not work.

Try instead...

Code:


document.getElementById("foo").style.backgroundColor='#0f0';

coothead

**jscheuer1** · 07-22-2011, 04:11 PM

Nope, doesn't work. But coothead is actually right in a way, this works in all I've mentioned:

Code:

<!DOCTYPE HTML>
<title>Test</title>
<embed id="foo" wmode="transparent" src="http://www.w3schools.com/media/bookmark.swf" width="400" height="40" type="application/x-shockwave-flash" />

<script type="text/javascript">
document.getElementById("foo").style.backgroundColor='#0f0';
</script>

But then the embed has no default background color/bgColor. And unfortunately you cannot setAttribute('wmode', 'transparent') cross browser.

But as long as you hard code it and have a fall back background-color style set in case javascript is disabled, the above works fine.

**Rain Lover** · 07-24-2011, 12:27 PM

Originally Posted by jscheuer1

Nope, doesn't work. But coothead is actually right in a way, this works in all I've mentioned:

Code:

<!DOCTYPE HTML>
<title>Test</title>
<embed id="foo" wmode="transparent" src="http://www.w3schools.com/media/bookmark.swf" width="400" height="40" type="application/x-shockwave-flash" />

<script type="text/javascript">
document.getElementById("foo").style.backgroundColor='#0f0';
</script>

But then the embed has no default background color/bgColor. And unfortunately you cannot setAttribute('wmode', 'transparent') cross browser.

But as long as you hard code it and have a fall back background-color style set in case javascript is disabled, the above works fine.

Actually I'm building a widget in which users might choose a custom background color or set it to transparent.
Here's what I initially tried without the setAttribute method:

Code:

<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
var x;
var y;
var z;
z = "#00FF00";
if (z == "transparent" || z == "") {
   x = ""; y = "transparent";
  }
else {
   x = z; y = "window";
}
</script>
</head>
<body>
<embed id="foo" bgcolor="'+x+'" wmode="'+y+'" src="http://www.w3schools.com/media/bookmark.swf" width="400" height="40" type="application/x-shockwave-flash" />
</body>
</html>

But it didn't work. All I want is define three variables and change x & y based on the z value. I wonder what I did wrong.
Thanks again!

**jscheuer1** · 07-24-2011, 01:35 PM

That last bit of code there doesn't do anything to the embed. The 'substitutions' aren't part of any script so are literal. And since a literal:

Code:

'+x+'

isn't a valid color, it does nothing.

Try:

Code:

<!DOCTYPE HTML>
<title>Test</title>
<style type="text/css">
#foo {
	background-color: #000;
}
</style>
<embed id="foo" wmode="transparent" src="http://www.w3schools.com/media/bookmark.swf" width="400" height="40" type="application/x-shockwave-flash" /><br>
<select id="choose">
<option value="#000" selected>Black</option>
<option value="#0f0">Green</option>
<option value="#f00">Red</option>
<option value="#00f">Blue</option>
<option value="transparent">Transparent</option>
</select>
<script type="text/javascript">
document.getElementById('choose').onchange = function(){
	document.getElementById('foo').style.backgroundColor = this.value;
}
document.getElementById('choose').onchange();
</script>

**Rain Lover** · 07-24-2011, 05:17 PM

Originally Posted by jscheuer1

Code:

wmode="transparent"

What if a user decides to display the flash default background color?
For example: http://rain-lover.webs.com/menu.swf

All I want is define three variables and change x & y based on the z value.

**coothead** · 07-24-2011, 06:44 PM

Hi there Rain Lover,

here is a rough and ready example for you to play with...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>rough example</title>

<style type="text/css">
#flash{
    width:800px;
    margin:auto;
 }
</style>

<script type="text/javascript">

   var c,o,p0,p1;

function init(){
   c=document.getElementById('colors').value;

document.getElementById('colors').onchange=function(){
   document.getElementById('flash').removeChild(o);
   c=this.value;
   makeIt();
 }
   makeIt();
 }

function makeIt(){
   o=document.createElement('object');
   o.setAttribute('type','application/x-shockwave-flash');
   o.setAttribute('data','http://rain-lover.webs.com/menu.swf');
   o.setAttribute('width',800);
   o.setAttribute('height',600);

   p0=document.createElement('param');
   p0.setAttribute('name','movie');
   p0.setAttribute('value','http://rain-lover.webs.com/menu.swf');

   p1=document.createElement('param');
   p1.setAttribute('name','bgcolor');
   p1.setAttribute('value',c);

   o.appendChild(p0);
   o.appendChild(p1);

   document.getElementById('flash').appendChild(o);
 }

   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);
</script>

</head>
<body>

<div>
<select id="colors">
 <option value="000000">black</option>
 <option value="ff0000">red</option>
 <option value="0000ff">blue</option>
 <option value="00ff00">green</option>
 <option value="ff9933">yellow</option>
</select>
</div>

<div id="flash"></div>

</body>
</html>

cothead

**jscheuer1** · 07-25-2011, 02:42 AM

Originally Posted by Rain Lover

What if a user decides to display the flash default background color?
For example: http://rain-lover.webs.com/menu.swf

Set that as its background-color in the style. In the case of the demo from my last post, that was black:

Code:

<style type="text/css">
#foo {
	background-color: #000;
}
</style>

For your menu it would be #414141.

You can aslo make it the value of an option in the select menu. You could call it Default. In my demo (where it was black) I called it Black.

Did you try my demo?