Can the style of a html element be used for conditions ex. if

**tlacaelelrl** · Apr 13, 2011 00:49

Let´s say that I have a <p id"myid"> tag where I know the background is #FFFFFF, can I do something like

Code JavaScript:

if (document.getElementById("myid").style.background=="#FFFFFF")
{
do this;
}

if so, how is it done, since I tried it the way explained above and it does not work for me.

I know it sounds weird what I´m trying to do but I would like to figure a way

**AllanP** · Apr 13, 2011 01:51

There are several problems to this approach. Unless you set the background colour yourself on loading the page the test will fail, even though you set the colour using css.

Try this small script with and without the line setting the colour on a div that has a white background set in your css style.

window.onload=function()
{ var elem=document.getElementById("myDiv")
elem.style.backgroundColor="#000000"; // comment this out and run again
alert(elem.style.backgroundColor)
}

Another problem is that even if you do set the colour, IE browsers will return #000000 for a black background-color and non-IE browsers will return RGB(0,0,0). This makes comparison difficult without browser sniffing.

Also, if you decide to use the rgb format for all browsers, IE returns rgb(0,0,0) on testing and some non-IE browsers return rgb(0, 0, 0). One is separated by spaces, the other is not.

You can solve the problem, but the script is a lot longer than you think!

**tlacaelelrl** · Apr 13, 2011 02:20

Originally Posted by AllanP

There are several problems to this approach. Unless you set the background colour yourself on loading the page the test will fail, even though you set the colour using css.

Try this small script with and without the line setting the colour on a div that has a white background set in your css style.

window.onload=function()
{ var elem=document.getElementById("myDiv")
elem.style.backgroundColor="#000000"; // comment this out and run again
alert(elem.style.backgroundColor)
}

Another problem is that even if you do set the colour, IE browsers will return #000000 for a black background-color and non-IE browsers will return RGB(0,0,0). This makes comparison difficult without browser sniffing.

Also, if you decide to use the rgb format for all browsers, IE returns rgb(0,0,0) on testing and some non-IE browsers return rgb(0, 0, 0). One is separated by spaces, the other is not.

You can solve the problem, but the script is a lot longer than you think!

Thank you for explaining, while waiting for an answer I found a different approach, but I suppose this can only work for certain elements, I used the size="" attribute to access the element.

The thing is, I was trying to fire an event on a field, but only if the event was not fired before by this same event to keep track of errors, but in my script I want to add an error count only for each field and not multiple error count for each field, I don´t even know if I am making any sence.

Anyway, what I am trying to achieve is field validation while also adding a few extra features, like showing errors to users an so on, have a look at this and let me know what you think, if you have the time...

Code HTML4Strict:

<html>
<head>
<style type="text/css">
.consoleoferrors
	{
		text-align:left;
		width:auto;
		height:auto;
		position:fixed;
		top:auto;
		bottom:auto;
		right:10px;
		background:red;
		color:white;
	}
.consoleoferrors2
	{
		text-align:left;
		width:auto;
		height:auto;
		position:fixed;
		bottom:10px
		right:10px;
		background:red;
		color:white;
	}
</style>
</head>
<body>
<div id="regulartextfields">
<input type="text" size="15" id="regulartextfields">
</div>
<input disabled="true" id="button" type="submit" value="submit" >
</form>
<div id="consoleoferrors" class="consoleoferrors"></div>
<div id="consoleoferrors2" class="consoleoferrors2"></div>
			<script type="text/javascript">
				function checkfield_1(event)
					{
						//Global Variables
							var NOsymbolshere=new RegExp(/[ª!"·$%&()=?¿¡º^*¨_:;,.-`+`+´ç]/);
							var NOnumbershere=new RegExp(/\d/);
							var thefield=event.target || event.srcElement;
							var thevalue=thefield.value.toLowerCase();
					//Conditions
						if (thefield.size=="14")
							{
								thefield.size="15";
								counterrors--;
							}
						if (NOnumbershere.test(thevalue)==true)
							{
								document.getElementById("consoleoferrors").innerHTML=("Error.");
								thefield.style.background="#FFFF00";
								counterrors++;
								document.getElementById("consoleoferrors2").innerHTML=("Error.");
								thefield.size="14";								
							}
						else if (NOsymbolshere.test(thevalue)==true)
							{
								document.getElementById("consoleoferrors").innerHTML=("Error");
								thefield.style.background="#FFFF00";
								counterrors++;
								document.getElementById("consoleoferrors2").innerHTML="Please correct the errors highlighted in yellow!";
								thefield.size="14";
							}
						else if(thevalue.length<=1)
							{
								document.getElementById("consoleoferrors").innerHTML=("Error");
								thefield.style.background="#FFFF00";
								counterrors++;
								document.getElementById("consoleoferrors2").innerHTML="Please correct the errors highlighted in yellow!";
								thefield.size="14";
							}
						else if(thevalue.length>=15)
							{
								document.getElementById("consoleoferrors").innerHTML=("Error");
								thefield.style.background="#FFFF00";
								counterrors++;
								document.getElementById("consoleoferrors2").innerHTML="Please correct the errors highlighted in yellow!";
								thefield.size="14";
							}
						else
							{								
								thefield.style.background="#FFFFFF";								
								//Format text ex. (from TEXT to Text or from text to Text or TeXt to Text)
								var fixvalue=thefield.value.toLowerCase();
								var fixvalue_2=(fixvalue.charAt(0).toUpperCase()+fixvalue.slice(1));
								thefield.value=fixvalue_2;
							}
					//console of errors last check, if errors submit button is disabled, if no errors, submit button is enabled.
						if (counterrors>=1)
							{
								document.getElementById("consoleoferrors2").innerHTML="Please correct the errors highlighted in yellow!";
							}
						else
							{
								document.getElementById("consoleoferrors2").innerHTML="";
								document.getElementById("consoleoferrors").innerHTML="";
							}
						if (counterrors>=1)
							{
								document.getElementById("button").disabled=true;
							}
						else
							{
								document.getElementById("button").disabled=false;
							}
					}
				var apply=document.getElementById("regulartextfields");				
				var counterrors=0;
				if (apply.addEventListener)
					{
						apply.addEventListener("change", checkfield_1, false);
					}
				else if (apply.attachEvent)
					{
						apply.attachEvent("onchange", checkfield_1);
					}
			</script>
 
</body>
</html>

User Tag List

Thread: Can the style of a html element be used for conditions ex. if

Thread Tools

Display

Can the style of a html element be used for conditions ex. if

Bookmarks

Bookmarks

Posting Permissions