Jump to content

How Do I Get The Border Color?

Shanester

By Shanester
in JavaScript

Recommended Posts

Shanester Newbie

Shanester

Posted
Posted

Greetings,How can I check the color of a border?This works in Internet Explorer 8:

windows.status = OBJECT.currentStyle.borderColor;

However, this doesn't work in other browsers (Firefox, Opera, Chrome, Safari):

windows.status = OBJECT.style.borderColor;

So, how can I check the color of a border in a non-ie browser?Thanks,Shane.

Link to comment
Share on other sites
just2comment Newbie

just2comment

Posted
Posted

In fact, I have two related questions:1) Is this related to https://developer.mozilla.org/en/DOM/element.style?I found specially interesting the last code (copied here from that page)--------------------var elt = document.getElementById("elementIdHere");var out = "";var st = elt.style;var cs = window.getComputedStyle(elt, null);for (x in st) out += " " + x + " = '" + st[x] + "' > '" + cs[x] + "'\n";--------------------2) How would you set that value with JavaScript? (a link may be enough, but I didn't find one)

Link to comment
Share on other sites
Shanester Newbie

Shanester

Posted
  • Author
Posted

I was able to get the border color using getComputedStyle method.The border color for the input box is initially set by an external style sheet when the page loads. It is then turned red by JavaScript if the user types invalid input.getComputedStyle is part of the DOM and doesn't work for Internet Explorer.Thanks for your help.Shane.

Link to comment
Share on other sites
just2comment Newbie

just2comment

Posted
Posted

Thanks. However, this code does not work in IE6 (even the alert is not working at all) any ideas?<html><head> <script> function changeColor(elementId, color) {alert("Hi"); element = document.getElementById(elementId); if (element.style) { element.style.borderColor = color; element.style.backgroundColor = color; } else { element.currentStyle.borderColor = color; element.currentStyle.backgroundColor = color; } return false; } </script></head><body> <div id="div1" style="border: 2px solid"> <form name="myform1" id="myform1" onsubmit="return changeColor('div1', 'red')"> email: <INPUT NAME="register1"> <button id="myBtn1">Submit</button> </form> </div> <div id="div3" style="border: 2px solid"> <form name="myform3" id="myform3" onsubmit="return changeColor('div3', '#0f0')"> email: <INPUT NAME="register3"> <button id="myBtn3">Submit</button> </form> </div></body></html>

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

IE6 does support element.styleOP reported problems setting borders. Others have reported problems setting borders this way in IE6 specifically.Is yours a border problem or something else?Are you getting an error message ?Have you tried adding a strict doctype to your document? Sometimes that changes stuff. Don't know about IE6, though.But the alert doesn't work. If IE6 thinks there is a syntax error in the function, then the function will not build, so it will not exist, so it will not run when called. And of course the alert would not alert.Try commenting out parts of the function, one section at a time, till the alert works.You can start with the whole else block, because I don't think it will ever get called. I don't think you can modify currentStyle. I think it's just a getter. That's the only way I've ever seen it used or used it myself, anyway.

Link to comment
Share on other sites
just2comment Newbie

just2comment

Posted
Posted

Thank you very much for your answer and ideasAbout

Is yours a border problem or something else?
Good point, in fact I'm trying to learn how to access and change the so called computedStyle (the "real" one, I think), and I get confused with
  1. Cross browser issues, with which all of us have to live
  2. Some parts of the style can be accessed tho
  3. Some parts of the style are accessed through .style while others... I don't know how... So far, it's like if you want to access/change something you have to define it in the CSS and/or HTML... but I'm not sure.

I know that computedStyle is like a getter, but I didn't know about that about currentStyle... I think I was able to change the style... but maybe I'm wrong, I'm testing much code in these days, trying to learn.About

Have you tried adding a strict doctype to your document? Sometimes that changes stuff. Don't know about IE6, though.
I'll try, I didn't know about this.About
If IE6 thinks there is a syntax error in the function, then the function will not build, so it will not exist, so it will not run when called. And of course the alert would not alert.
Waw! this is hard... Mo "cancels" execution only from the error line on... not the entire function... thanks for
Try commenting out parts of the function, one section at a time, till the alert works.
I wouldn't figure it out.
Link to comment
Share on other sites
Shanester Newbie

Shanester

Posted
  • Author
Posted

Don't use currentStyle to change a value. Use style instead. The currentStyle object should only be used to check the value in the cascade.Also, remember that currentStyle is not part of the DOM and only works in ie5+.If alert method isn't working, try calling it with window.alert.Regards,Shane.

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

Every now and then I've discovered, invisible characters sneak into code and ruin it. This especially happens during copy/paste operations.Try renaming your function. I know it sounds dumb.If that doesn't work, try typing the function from scratch. Build it up slowly. Add just the alert statement the first time around. See if it works. Then add other statements.

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

Err. I just noticed your forms don't have actual submit buttons. See if anything changes if you add one. And unless you have a really good reason for using a <button> tag, use an <input type="submit"> tag instead. Some browsers don't render button-tag buttons as expected. Safari, especially.

Link to comment
Share on other sites
just2comment Newbie

just2comment

Posted
Posted

The input type=button along with cross-browser issues were combined: on IE clicking on a button does not triggers a submit event as in Mo with this example... I include here the "final" code just for completeness (and I've learned using code tags...):

<html><head>  <script>  function changeColor(elementId, color)  {	element = document.getElementById(elementId);	if (element.style)	{	  element.style.borderColor = color;	  element.style.backgroundColor = color;	}	return false;  }  </script></head><body>  <div id="div1" style="border: 2px solid">	<form name="myform1" id="myform1" onsubmit="return changeColor('div1', 'red')">		email: <INPUT NAME="register1">		<button id="myBtn1" onclick="return changeColor('div1', 'red')">Submit</button>	</form>  </div>  <div id="div3" style="border: 2px solid">	<form name="myform3" id="myform3" onsubmit="return changeColor('div3', '#0f0')">		email: <INPUT NAME="register3">		<button id="myBtn3" onclick="return changeColor('div3', '#0f0')">Submit</button>	</form>  </div></body></html>

About

Every now and then I've discovered, invisible characters sneak into code and ruin it. This especially happens during copy/paste operations.Try renaming your function. I know it sounds dumb.If that doesn't work, try typing the function from scratch. Build it up slowly. Add just the alert statement the first time around. See if it works. Then add other statements.
happens sometimes... not too often to me, but in these days I had to retype a section of code (writing "exactly" the same contents...) in order to have a page working as expected...Coming back to the "important" issue, Mo seems to generate a submit event for buttons as well as for submits...
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...