JavaScript: set -moz-opacity for old Gecko

Firefox 0.8 does not support opacity.  Instead it uses:
  -moz-opacity

How can I set -moz-opacity with JavaScript?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Box</title>
<style type="text/css">
</style>
</head>
<body>

<h1 id="zzz">Hello World</h1>

<script type="text/javascript">
	var obj = document.getElementById('zzz');
	 if(obj) {
	 obj.style.background = 'red';
	 obj.style.-moz-opacity  = '.7';
	 }
</script>

</body>
</html>

Open in new window

LVL 16
hankknightAsked:
Who is Participating?
 
hieloConnect With a Mentor Commented:
try the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Box</title>

</head>
<body>

<h1 id="zzz">Hello World</h1>

<script type="text/javascript">
window.onload=function(){
	insertCSS();
}

function insertCSS(){
	var rules='body{color:blue;} .dynamicElement{-moz-opacity:.7;background-color:red;}';
	var h=document.getElementsByTagName('head')[0];
	var s=document.createElement('style');
	s.setAttribute("type", "text/css");
	if(s.styleSheet)// IE
	{
		s.styleSheet.cssText = rules;
	}
	else
	{
		var t = document.createTextNode(rules);
		s.appendChild(t);
	}
	h.appendChild(s);
};

        var obj = document.getElementById('zzz');
         if(obj) {
         		obj.className+=' dynamicElement';
         }

</script>

</body>
</html>

Open in new window

0
 
Adoryc666Connect With a Mentor Commented:
This should work.
<script type="text/javascript">
	var obj = document.getElementById('zzz');
	 if(obj) {
	 obj.style.background = 'red';
	 obj.style.MozOpacity  = '.7';
	 }
</script>

Open in new window

0
 
hieloCommented:
my suggestion would be to put all the css on a single class definition and instead of assigning individual css rules per element, give your dynamic elements the class:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Box</title>
<style type="text/css">
.dynamicElement{
  -moz-opacity  = '.7';
  background-color:red;
}
</style>
</head>
<body>

<h1 id="zzz">Hello World</h1>

<script type="text/javascript">
        var obj = document.getElementById('zzz');
         if(obj) {
         obj.className+=' dynamicElement';
         }
</script>

</body>
</html>

Open in new window

0
 
hankknightAuthor Commented:
Thank you both.

hielo, I understand your suggestion however the reason I did not do it that way was because -moz-opacity is NOT valid CSS.  It does not validate and it produces warnings.  I am trying to find a way to make this work on old versions of Firefox without producing warnings with invalid code.  Is there a way to follow your suggestion using valid code?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.