473,883 Members | 1,608 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Getting (and setting) a style value from a element that use a class

Please forgive the simplicy of this question. I have the following code
which attempts to determine the color of some text and set other text
to match that color. It works fine in Firefox, but does nothing in IE.
I'd be greatful for any assistance. Also, if I will have problems the
code on Opera or Safari, I'd appreciate any pointers--I don't have a
Mac to test Safari.

THanks very much,

Michael

// setStyleByClass : given an element type and a class selector,
// style property and value, apply the style.
// args:
// t - type of tag to check for (e.g., TD)
// c - class name
// p - CSS property
// v - value
var ie = (document.all) ? true : false;
var c_style = "foo";
function setStyleByClass (t,c,p){
// alert("Hello world");
var elements;
if(t == '*') {
// '*' not supported by IE/Win 5.5 and below
elements = (ie) ? document.all : document.getEle mentsByTagName( '*');
} else {
elements = document.getEle mentsByTagName( t);

}
for(var i = 0; i < elements.length ; i++){
var node = elements.item(i );
for(var j = 0; j < node.attributes .length; j++) {
if(node.attribu tes.item(j).nod eName == 'class') {
if(node.attribu tes.item(j).nod eValue == c) {
// alert("type is: " + t + "\n" + "class name: " + c + "\n" + "CSS
property: " + p + "\n" + "Node style: " + node.style);

TD = eval('node');
// alert("What we have is: " + TD);
// this seems to be a problem in IE

// IS MOZILLA BASED BROWSER
if(document.def aultView && document.defaul tView.getComput edStyle){

c_style = document.defaul tView.getComput edStyle(TD,
'').getProperty Value("color");
// alert("text color is: " + c_style);
// alert('DOM way: '+ c_style);
}
else if(document.uni queID && c_style.current Style){
// IS INTERNET EXPLORER //
alert('IE way:' );
}

eval('node.styl e.' + p + " = '" + c_style + "'");
setStyleByTag(" font","color", c_style,1)
}
}
}
}
}

Jul 23 '05 #1
21 4013
Michael Bierman wrote:
Please forgive the simplicy of this question. I have the following code
which attempts to determine the color of some text and set other text
to match that color. It works fine in Firefox, but does nothing in IE.
I'd be greatful for any assistance. Also, if I will have problems the
code on Opera or Safari, I'd appreciate any pointers--I don't have a
Mac to test Safari.
Please don't post code with tabs: replace each tab with one or two
spaces, a global find/replace should do the trick pretty quickly.

[...] // '*' not supported by IE/Win 5.5 and below
elements = (ie) ? document.all : document.getEle mentsByTagName( '*');
Browser sniffing is never a good idea. Why not feature testing, and
test for the most widely supported feature first:

if (document.getEl ementsByTagName ) {
elements = document.getEle mentsByTagName( '*');
} else if (document.all) {
elements = document.all;
}

[...]
TD = eval('node');
// alert("What we have is: " + TD);
// this seems to be a problem in IE
'eval' - eeyyuww, not liked at all. Why not:

alert("What we have is: " + node.nodeName);

Works in Firefox, IE, Mozilla, Netscape, Safari...

[...] eval('node.styl e.' + p + " = '" + c_style + "'");
setStyleByTag(" font","color", c_style,1)


You didn't include the code for 'setStyleByTag' , is it in the
O'Reilly thing?
<URL:http://www.oreillynet. com/javascript/2001/10/05/examples/styley_source.t xt>

This stuff appears to have come from Apple copyright 2001, so it is
very old and uses some convoluted methods to do things.

[...]

If all you are trying to do is get the colour of an element and then
apply it to another element, then the following example has been
tested in Firefox and IE and should work in any current browser).

If you want to play with this stuff, have a look here:

<URL:http://www.quirksmode. org/dom/getstyles.html>
<style type="text/css">
.xx {color: blue; border: 1px solid gold;}
</style>

<div class="xx" onclick="doColo ur(this,'zz');" >
Click me to make zz the same colour as me<br>
My colour is set by a class</div>

<div class="xx" style="color: red;" onclick="doColo ur(this,'zz');" >
Click me to make zz the same colour as me<br>
My colour is set by an inline style over-riding a class</div>

<div style="color: green;" id="zz" onclick="
alert(this.styl e.color);
this.style.colo r = '';
">I am zz. Click me to set me back to the document default</div>

<script type="text/javascript">
function doColour(a, b) {
var c;

// For browsers that support getComputedStyl e (Mozilla et al)
if (window.getComp utedStyle) {
c = document.defaul tView.getComput edStyle(a,
'').getProperty Value('color');

// For browsers that support currentStyle (IE)
} else if (a.currentStyle ) {
c = a.currentStyle. color;
}

// Apply color to element
if (c) {
if (document.getEl ementById) {
document.getEle mentById(b).sty le.color = c;
} else if (document.all) {
document.all(b) .style.color = c;
}
}
}
</script>

--
Rob
Jul 23 '05 #2
Thanks for your response, Rob.
Please don't post code with tabs: replace each tab with one or two

spaces, a global find/replace should do the trick pretty quickly. <<

Sorry about that. Here's more detail on the situation; perhaps it will
shed some light on what I'm up to. I have a table with some content in
a TD with a class and no id. Of course I could add an ID--and probably
should, but I was trying to learn to walk the DOM to discover what I
needed. In this case, to be able to set the color attribute on
everything inside the TD with the specified class name.

Anyway, inside the TD, there is some text with inline styles--ugly code
that I can't easily change as it comes from another application. The
code like <font color="red">. This inline style overrides the CSS
style on the surrounding text. Originally I used a newer version of
the Oriely code to successfully change all of the inline colors to
black. But because different style sheets will be involved, instead I
want to get the calculated value of the surrounding text and apply that
color to override all of the inline styles. (there are no spans...the
font color is just set inline. The trigger for changing the color is a
button above the TD in question. So I thought it would be as simple as
finding the right method of setting this as there is in Firefox. I've
spent some time looking at the code you provided, but I haven't been
able to translate it into my situation. Maybe there is an entirely
easier way to do what I'm trying to accomplish?

Michael

Jul 23 '05 #3
So I tried using http://www.quirksmode.org/dom/getstyles.html and I
don't get the result I expect. Code:

<script type="text/javascript">

function getStyle(el,sty leProp)
{
var x = document.getEle mentById(el);
alert("var x is: " + x);
if (window.getComp utedStyle) {
var y = window.getCompu tedStyle(x,null ).getPropertyVa lue(styleProp);
alert("We're using Mozilla" + "\n" + "value is: " + y);
// set the value of the color here.
}
else if (x.currentStyle ) {
var y = eval('x.current Style.' + styleProp);
alert("We're using IE" + "\n" + "value is: " + y);
// set the value of the color here.
return y;
}
}
/* Enter the form via JavaScript so that browsers without JavaScript
don't ever see the buttons */

document.write( '<form id="myForm" name="myForm">' );
// Here's the new remove color based on the context, rather than
hardcoding black.
document.write( '<input type="button" value="Hide color"
id="colorToggle " accesskey="1" tabIndex="1" title="Remove all body text
color" onClick=\'getSt yle("barney","c olor");\'\/>');
document.write( '&nbsp;&nbsp;&n bsp;');

// document.write( '<input type="button" value="Hide color"
id="colorToggle " accesskey="1" tabIndex="1" title="Remove all body text
color" onClick=\'setSt yleByTag("font" ,"color","black ",1);\'\/>');
// document.write( '&nbsp;&nbsp;&n bsp;');
document.write( '<input type="button" id="colorToggle 2" accesskey="2"
tabIndex="2" value="Show color" title="Reapply body text color"
onClick=\'histo ry.go()\' \/>');
// setStyleByClass ("openMessageBo dy","color");

document.write( '<\/form>');

</script>

Result: on IE, I get the "We're using IE" (which is just what we
expect) and "value is: buttontext". which isn't.

This script seems to work fine on the original site--so I'm really
stumped.

Regards,

Michael

Jul 23 '05 #4
I meant to add that I have created a simple test case at
http://www.thebiermans.net/junk/stumped.html

Hopefully this makes it easier to comment on the problem.

Thanks in advance for any suggestions and the help so far.

Michael

Jul 23 '05 #5
Michael Bierman wrote:
So I tried using http://www.quirksmode.org/dom/getstyles.html and I
don't get the result I expect. Code:
You get as far as getting the new colour but don't set it.

<script type="text/javascript">

function getStyle(el,sty leProp)
{
var x = document.getEle mentById(el);
alert("var x is: " + x);


Better to use ..." + x.nodeName as IE just says 'object' or
similar.

[...]

The following works in Firefox and IE and should be OK in other
recent browsers too. You may want to add support for IE 5 in
regard to getElementsByTa gName and getElementById.

I've assumed you want to change everything inside the TD, hence
my use of getElementsByTa gName('*'). If you want a more
selective method, you can recurse down the children of the TD and
change them based on node name or other attribute.

I also got rid of 'eval', it isn't necessary for this
application.
function getStyle(el,sty leProp) {
var x = document.getEle mentById(el);
var msg = 'x is a : ' + x.nodeName;
if (window.getComp utedStyle) {
var y =
window.getCompu tedStyle(x,null ).getPropertyVa lue(styleProp);
msg += ('\nUsing getComputedStyl e: ' + y);
} else if (x.currentStyle ) {
var y = x.currentStyle. color;
msg += '\nUsing currentStyle: ' + y;
}
// Now set all elements inside x to same colour
elTags = x.getElementsBy TagName('*');
var i = elTags.length;
msg += '\nThere are ' + i + ' tags to change';
while (i--){
elTags[i].style.color = y;
}
alert(msg);
}
--
Rob
Jul 23 '05 #6
Rob,

Thank you! That is excellent. Not only does that solve the problem,
it gives me something to study. I really appreciate your time and
willingness to share your expertise.

Michael

Jul 23 '05 #7
Rob,

Your code works on Firefox, IE, Mozilla, and Opera. However, Safari
doesn't seem to suppport either getComputedStyl e() or currentStyle. At
least so claims http://www.quirksmode.org/dom/w3c_css.html and the
imperical evidence (doesn't work in my friend's macs.)

Any suggestions on a workaround? There is
http://developer.apple.com/internet/...ey_source.html
but that seems like an old reference 2001 and very inelegant.

Again, many thanks.

Jul 23 '05 #8
Michael Bierman wrote:
Rob,

Your code works on Firefox, IE, Mozilla, and Opera. However, Safari
doesn't seem to suppport either getComputedStyl e() or currentStyle. At
least so claims http://www.quirksmode.org/dom/w3c_css.html and the
imperical evidence (doesn't work in my friend's macs.)

I tested Safari 1.2.4 (latest version on Mac OS X 10.3) and it
seems Safari doesn't support window.getCompu tedStyle or
element.current Style.

I have no ideas regarding a work around.
Any suggestions on a workaround? There is
http://developer.apple.com/internet/...ey_source.html
but that seems like an old reference 2001 and very inelegant.


I don't think there is anything in that script that will detect
an in-line style in Safari.
--
Rob
Jul 23 '05 #9
RobG wrote:
<snip>
// For browsers that support getComputedStyl e (Mozilla et al)
if (window.getComp utedStyle) {
c = document.defaul tView.getComput edStyle(a,
'').getProperty Value('color');

<snip>

There is a logical inconstancy in feature testing for -
window.getCompu tedStyle - and then using
document.defaul tView.getComput edStyle. It is not uncommon and seems to
have its origins in implementations decisions that are true in
Mozilla/Gecko and Opera 7+, but not necessarily true in other
environments.

The W3C DOM Views specification says that the - DocumentView -
interface will be implemented by the document object, and will have a -
defaultView - property that is a reference to an object implementing the
AbstractView - interface. As the - AbstractView - interface only has one
property defined in DOM Views and that property is - document -,
referring to the document object, it may be convenient for an
implementation to regard the global object as suitably implementing
the - AbstractView - interface (as it already has a - document -
property) but the W3C specification does not require that. And, for
example, IceBrowser 5 fully implements the W3C DOM Views specification
but its - document.defaul tView - property does not refer to the global
object (merely an object that implements the required interface, as
called for by the spec).

As the W3C DOM Style specification states that it is the object
implementing the - AbstractView - interface that will implement the -
getComputedStyl e - method (where supported) the only W3C DOM conforming
method of accessing that method is through the - defalutView - property
of the document. Assuming that - AbstractView - equals - window - would
be writing to proprietary implementations _not_ the specification and
will cause problems with at least some DOM standard browsers.

But probably more important is to strictly adhere to the feature
detecting principal that a feature detecting test should have (as near
as practical) a one-to-one relationship to the feature that is to be
used. So if the feature in question is the - getComputedStyl e - method
of the - AbstractView - interface referred to by the - defaultView -
property of the document, then that should be the subject of the test,
not a method of the window object. (Or, assuming that there is a reason
for abandoning support for DOM standard browsers and just following a
couple of known implementations , if the test is for the method of the
window then it is the method of the window object that the code should
be employing).

While we are on the subject of computed styles; the - getPropertyValu e
- method of the - CSSStyleDeclara tion - implementing object that is
returned by a call to - getComputedStyl e - has proved problematic on
recent Konqueror (and so probably also Safari) versions. Because,
instead of returning just the value assigned (as a string), it returns
the equivalent of the full style declaration. So, given -
border-top-width:2px; -, while other browsers would return just '2px'
from - getPropertyValu e -, Konqueror (and so probably Safari) returns "
border-top-width:2px;". This renders the common practice of passing the
returned string through - parseInt/Float - ineffective as it means that
NaN will invariable be returned instead of a useful value.

This is not as much of a problem as a superficial examination might
suggest because the W3C DOM Style specification allows for the
extraction of style information in a very exact form, and Konqueror
supports the required interfaces. Instead of using - getPropertyValu e -
you can use - getPropertyCSSV alue - to acquire a reference to an object
implementing the - CSSValue - interface. An interface that provides
methods that give precise value information in a standard form.
Dimensions, for example, may be extracted using the - getFloatValue -
method, and will be of numeric type (no need for string to number
conversion).

This can be particularly useful when the value of interest is a color as
the - RGBColor - interface is standard while color values returned
form - getPropertyValu e - may take any of a number of valid CSS forms
depending on the browser.

The problem with - getPropertyCSSV alue - is that it is not universally
implemented. Opera 7, for example, does not implement it, leaving no
choice but to fall back to - getPropertyValu e. But I have found that
preferring - getPropertyCSSV alue - and then falling back to -
getPropertyValu e - gives the widest support available and avoids issues
with Konqueror/Safari.

It is probably unfair to encourage you into using the CSSValue interface
without a working demonstration so the following is some test code that
I wrote for computed styles in web browsers. It shows what is available
from the computed style objects on various browsers. The instructions
are in the text:-

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

<script type="text/javascript">

var InitializeMe = (function(){
var global = this;
var base = null;
var safe = false;
var listenerType = (global.addEven tListener && 2)||
(global.attachE vent && 3)|| 0;
function getStackFunc(ne xt, funcRef, arg1,arg2,arg3, arg4){
function l(ev){
funcRef((ev?ev: global.event), arg1,arg2,arg3, arg4);
if(next)next = next(ev);
return (funcRef = null);
};
l.addItem = function(d){
if(next){
next.addItem(d) ;
}else{
next = d;
}
};
return l;
};
return (function(funcR ef, arg1,arg2,arg3, arg4){
if(base){
base.addItem(ge tStackFunc(null , funcRef, arg1,arg2,arg3, arg4));
}else{
base = getStackFunc(nu ll, funcRef, arg1,arg2,arg3, arg4);
}
if(!safe){
switch(listener Type){
case 2:
global.addEvent Listener("load" , base, false);
safe = true;
break;
case 3:
global.attachEv ent("onload", base);
safe = true;
break;
default:
if(global.onloa d != base){
if(global.onloa d){
base.addItem(ge tStackFunc(null , global.onload)) ;
}
global.onload = base;
}
break;
}
}
});
})();

function doMouseDown(ev) {
var target, indent = '\n';
var text = '';
ev = ev||global.even t;
if(ev.shiftKey) {
target = ev.target||ev.s rcElement;
if(target){
text += getComputedCSSI nfo(target);
if(typeof target.offsetWi dth == 'number'){
text += indent + 'target.offsetW idth == '+target.offset Width;
text += indent + 'target.offsetH eight == '+target.offset Height;
text += indent + 'target.offsetL eft == '+target.offset Left;
text += indent + 'target.offsetT op == '+target.offset Top;
}
if(typeof target.clientWi dth == 'number'){
text += indent + 'target.clientW idth == '+target.client Width;
text += indent + 'target.clientH eight == '+target.client Height;
text += indent + 'target.clientL eft == '+target.client Left;
text += indent + 'target.clientT op == '+target.client Top;
}
if(typeof target.scrollWi dth == 'number'){
text += indent + 'target.scrollW idth == '+target.scroll Width;
text += indent + 'target.scrollH eight == '+target.scroll Height;
text += indent + 'target.scrollL eft == '+target.scroll Left;
text += indent + 'target.scrollT op == '+target.scroll Top;
}
}else{
text += 'No target';
}
frmEl.t.value = text;
return false;
}
}

InitializeMe(fu nction(){
frmEl = document.forms. f.elements;
document.onmous edown = doMouseDown;
});

var frmEl;
var global = this;

function getComputedCSSI nfo(element){
var indent = '\n';
var temp,cs,default View,text = '';
if(element){
if(element.tagN ame){
text += '<'+element.tag Name+'>\n';
}else if(element.node Name){
text += 'Node Name == ['+element.nodeN ame+']\n';
}
if(element.node Type){
text += 'Node Type == '+nodeType_name s[element.nodeTyp e]+'\n';
}
if(element.id){
text += 'ID == \"'+element.id+ '\"\n';
}
if(element.clas sName){
text += 'className == \"'+element.cla ssName+'\"\n';
}
if(
(defaultView = document.defaul tView)&&
(defaultView.ge tComputedStyle) &&
(cs = defaultView.get ComputedStyle(e lement, null))
){
for(var c = 0;c < CSSProprety_nam es.length;c++){
temp = cs.getPropertyV alue(CSSPropret y_names[c]);
if(typeof temp != 'undefined'){
text += indent + 'String value from - getPropertyValu e(\''+
CSSProprety_nam es[c]+'\') == \"'+temp+'\" ';
}
temp = cs[CSSStylePropert ies_names[c]];
if(typeof temp != 'undefined'){
text += indent +
(typeof temp) +
' value from - computedStyleOb ject.'+
CSSStylePropert ies_names[c]+' == \"'+temp+'\" ';
}
if( cs.getPropertyC SSValue){
temp = cs.getPropertyC SSValue(CSSProp rety_names[c]);
if(temp){
text += indent +
'CSSValue object from - getPropertyCSSV alue(\''+
CSSProprety_nam es[c]+'\') == ';
text += CSSValueReport( temp, (indent+'\t'));
}
}
if(typeof temp != 'undefined'){te xt += indent;}
}
}else if(element.curr entStyle){
for(var c = 0;c < CSSStylePropert ies_names.lengt h;c++){
temp = element.current Style[CSSStylePropert ies_names[c]];
if(typeof temp != 'undefined'){
text += indent +
'String value from - element.current Style.'+
CSSStylePropert ies_names[c]+' == \"'+temp+'\" ';
text += indent;
}
}
}
}
return text;
}

function CSSValueReport( cssValue, indent){
var type = cssValue.cssVal ueType;
var st = indent+'CSSValu e Type == '+type+' -> '+
(CSSValueType_n ames[type]||'not a specified type');
switch(type){
case 0: //CSS_INHERIT
st += indent+'The value is inherited : data == '+
cssValue.cssTex t;
break;
case 1: //CSS_PRIMITIVE_V ALUE
st += CSSPrimativeRep ort(cssValue, (indent+'\t'));
break;
case 2: //CSS_VALUE_LIST
for(var c = 0;c < cssValue.length ;c++){
st += indent+'Item == '+c;
st += CSSValueReport( cssValue.item(c ), (indent+'\t'));
}
break;
case 3: //CSS_CUSTOM
st += indent+'The value is a custom value : data == '+
cssValue.cssTex t;
break;
default:
break;
}
return st;
}
function CSSPrimativeRep ort(cssValue, indent){
var temp,type = cssValue.primit iveType;
var st = indent+'CSSPrim itiveValue Type == '+type+' -> '+
(CSSPrimativeTy pe_names[type]||'not a specified type');
switch(type){
case 0: //CSS_UNKNOWN
st += indent+
'Value is not a recognized CSS2 value: data == '+
cssValue.cssTex t;
break;

case 18: //CSS_DIMENSION
case 1: //CSS_NUMBER
case 2: //CSS_PERCENTAGE
case 3: //CSS_EMS
case 4: //CSS_EXS
case 5: //CSS_PX
case 6: //CSS_CM
case 7: //CSS_MM
case 8: //CSS_IN
case 9: //CSS_PT
case 10: //CSS_PC
st += indent+'Float value is == '+
cssValue.getFlo atValue(type);
st += tryLengthConver sion(cssValue, (indent+'\t'));
break;

case 11: //CSS_DEG
case 12: //CSS_RAD
case 13: //CSS_GRAD
case 14: //CSS_MS
case 15: //CSS_S
case 16: //CSS_HZ
case 17: //CSS_KHZ
st += indent+'Float value is == '+
cssValue.getFlo atValue(type);
st += tryOtherConvers ion(cssValue, (indent+'\t'));
break;

case 19: //CSS_STRING
case 20: //CSS_URI
case 21: //CSS_IDENT
case 22: //CSS_ATTR
st += indent+'String value is == \"'+
cssValue.getStr ingValue()+'\"' ;
break;

case 23: //CSS_COUNTER
temp = cssValue.getCou nterValue();
st += indent+'Counter .identifier == '+temp.identifi er;
st += indent+'Counter .listStyle == '+temp.listStyl e;
st += indent+'Counter .separator == '+temp.separato r;
break;

case 24: //CSS_RECT
temp = cssValue.getRec tValue();
st += indent+'Rect.to p == '+
CSSPrimativeRep ort(temp.top, (indent+'\t'));
st += indent+'Rect.le ft == '+
CSSPrimativeRep ort(temp.left, (indent+'\t'));
st += indent+'Rect.bo ttom == '+
CSSPrimativeRep ort(temp.bottom , (indent+'\t'));
st += indent+'Rect.ri gth == '+
CSSPrimativeRep ort(temp.right, (indent+'\t'));
break;

case 25: //CSS_RGBCOLOR
temp = cssValue.getRGB ColorValue();
st += indent+'RGBColo r.red == '+
CSSPrimativeRep ort(temp.red, (indent+'\t'));
st += indent+'RGBColo r.green == '+
CSSPrimativeRep ort(temp.green, (indent+'\t'));
st += indent+'RGBColo r.blue == '+
CSSPrimativeRep ort(temp.blue, (indent+'\t'));
break;

default:
break;
}
return st;
}

function tryLengthConver sion(cssValue, indent){
var temp,type = cssValue.primit iveType;
var st = indent+'Length Values -> ';
try{ //CSS_NUMBER
st += indent+'CSS_NUM BER value == '+cssValue.getF loatValue(1);
}catch(e){
st += indent+'Cannot Convert to CSS_NUMBER (exception)';
}
try{ //CSS_PERCENTAGE
st += indent+'CSS_PER CENTAGE value == '+
cssValue.getFlo atValue(2);
}catch(e){
st += indent+'Cannot Convert to CSS_PERCENTAGE (exception)';
}
try{ //CSS_EMS
st += indent+'CSS_EMS value == '+ cssValue.getFlo atValue(3);
}catch(e){
st += indent+'Cannot Convert to CSS_EMS (exception)';
}
try{ //CSS_EXS
st += indent+'CSS_EXS value == '+ cssValue.getFlo atValue(4);
}catch(e){
st += indent+'Cannot Convert to CSS_EXS (exception)';
}
try{ //CSS_PX
st += indent+'CSS_PX value == '+ cssValue.getFlo atValue(5);
}catch(e){
st += indent+'Cannot Convert to CSS_PX (exception)';
}
try{ //CSS_CM
st += indent+'CSS_CM value == '+ cssValue.getFlo atValue(6);
}catch(e){
st += indent+'Cannot Convert to CSS_CM (exception)';
}
try{ //CSS_MM
st += indent+'CSS_MM value == '+ cssValue.getFlo atValue(7);
}catch(e){
st += indent+'Cannot Convert to CSS_MM (exception)';
}
try{ //CSS_IN
st += indent+'CSS_IN value == '+ cssValue.getFlo atValue(8);
}catch(e){
st += indent+'Cannot Convert to CSS_IN (exception)';
}
try{ //CSS_PT
st += indent+'CSS_PT value == '+ cssValue.getFlo atValue(9);
}catch(e){
st += indent+'Cannot Convert to CSS_PT (exception)';
}
try{ //CSS_PC
st += indent+'CSS_PC value == '+ cssValue.getFlo atValue(10);
}catch(e){
st += indent+'Cannot Convert to CSS_PC (exception)';
}
return st;
}

function tryOtherConvers ion(cssValue, indent){
var temp,type = cssValue.primit iveType;
var st = indent+'Values -> ';
try{ //CSS_DEG
st += indent+'CSS_DEG value == '+ cssValue.getFlo atValue(11);
}catch(e){
st += indent+'Cannot Convert to CSS_DEG (exception)';
}
try{ //CSS_RAD
st += indent+'CSS_RAD value == '+ cssValue.getFlo atValue(12);
}catch(e){
st += indent+'Cannot Convert to CSS_RAD (exception)';
}
try{ //CSS_GRAD
st += indent+'CSS_GRA D value == '+ cssValue.getFlo atValue(13);
}catch(e){
st += indent+'Cannot Convert to CSS_GRAD (exception)';
}
try{ //CSS_MS
st += indent+'CSS_MS value == '+ cssValue.getFlo atValue(14);
}catch(e){
st += indent+'Cannot Convert to CSS_MS (exception)';
}
try{ //CSS_S
st += indent+'CSS_S value == '+ cssValue.getFlo atValue(15);
}catch(e){
st += indent+'Cannot Convert to CSS_S (exception)';
}
try{ //CSS_HZ
st += indent+'CSS_HZ value == '+ cssValue.getFlo atValue(16);
}catch(e){
st += indent+'Cannot Convert to CSS_HZ (exception)';
}
try{ //CSS_KHZ
st += indent+'CSS_KHZ value == '+ cssValue.getFlo atValue(17);
}catch(e){
st += indent+'Cannot Convert to CSS_KHZ (exception)';
}
return st;
}

var CSSValueType_na mes = ['CSS_INHERIT',' CSS_PRIMITIVE_V ALUE',
'CSS_VALUE_LIST ','CSS_CUSTOM'];

var CSSPrimativeTyp e_names = [
'CSS_UNKNOWN',' CSS_NUMBER',
'CSS_PERCENTAGE ','CSS_EMS','CS S_EXS','CSS_PX' ,'CSS_CM','CSS_ MM',
'CSS_IN','CSS_P T','CSS_PC','CS S_DEG','CSS_RAD ','CSS_GRAD',
'CSS_MS','CSS_S ','CSS_HZ','CSS _KHZ','CSS_DIME NSION','CSS_STR ING',
'CSS_URI','CSS_ IDENT','CSS_ATT R','CSS_COUNTER ','CSS_RECT',
'CSS_RGBCOLOR'];

var CSSProprety_nam es = [
'azimuth','back ground','backgr ound-attachment','ba ckground-color',
'background-image','backgro und-position','back ground-repeat',
'border','borde r-collapse','bord er-color','border-spacing',
'border-style','border-top','border-right','border-bottom',
'border-left','border-top-color','border-right-color',
'border-bottom-color','border-left-color','border-top-style',
'border-right-style','border-bottom-style','border-left-style',
'border-top-width','border-right-width','border-bottom-width',
'border-left-width','border-width','bottom' ,'caption-side',
'clear','clip', 'color','conten t','counter-increment',
'counter-reset','cue','c ue-after','cue-before','cursor ',
'direction','di splay','elevati on','empty-cells','float', 'font',
'font-family','font-size','font-size-adjust','font-stretch',
'font-style','font-variant','font-weight','height ','left',
'letter-spacing','line-height','list-style','list-style-image',
'list-style-position','list-style-type','margin', 'margin-top',
'margin-right','margin-bottom','margin-left','marker-offset',
'marks','max-height','max-width','min-height','min-width',
'orphans','outl ine','outline-color','outline-style',
'outline-width','overflo w','padding','p adding-top',
'padding-right','padding-bottom','paddin g-left','page',
'page-break-after','page-break-before','page-break-inside',
'pause','pause-after','pause-before','pitch' ,'pitch-range',
'play-during','positi on','quotes','r ichness','right ','size',
'speak','speak-header','speak-numeral','speak-punctuation',
'speech-rate','stress', 'table-layout','text-align',
'text-decoration','te xt-indent','text-shadow','text-transform',
'top','unicode-bidi','vertical-align','visibil ity','voice-family',
'volume','white-space','widows' ,'width','word-spacing','z-index'
];

var CSSStylePropert ies_names = [
'azimuth','back ground','backgr oundAttachment' ,'backgroundCol or',
'backgroundImag e','backgroundP osition','backg roundRepeat','b order',
'borderCollapse ','borderColor' ,'borderSpacing ','borderStyle' ,
'borderTop','bo rderRight','bor derBottom','bor derLeft',
'borderTopColor ','borderRightC olor','borderBo ttomColor',
'borderLeftColo r','borderTopSt yle','borderRig htStyle',
'borderBottomSt yle','borderLef tStyle','border TopWidth',
'borderRightWid th','borderBott omWidth','borde rLeftWidth',
'borderWidth',' bottom','captio nSide','clear', 'clip',
'color','conten t','counterIncr ement','counter Reset',
'cue','cueAfter ','cueBefore',' cursor','direct ion','display',
'elevation','em ptyCells','cssF loat','font','f ontFamily',
'fontSize','fon tSizeAdjust','f ontStretch','fo ntStyle','fontV ariant',
'fontWeight','h eight','left',' letterSpacing', 'lineHeight',
'listStyle','li stStyleImage',' listStylePositi on','listStyleT ype',
'margin','margi nTop','marginRi ght','marginBot tom','marginLef t',
'markerOffset', 'marks','maxHei ght','maxWidth' ,'minHeight',
'minWidth','orp hans','outline' ,'outlineColor' ,'outlineStyle' ,
'outlineWidth', 'overflow','pad ding','paddingT op','paddingRig ht',
'paddingBottom' ,'paddingLeft', 'page','pageBre akAfter',
'pageBreakBefor e','pageBreakIn side','pause',' pauseAfter',
'pauseBefore',' pitch','pitchRa nge','playDurin g','position',
'quotes','richn ess','right','s ize','speak','s peakHeader',
'speakNumeral', 'speakPunctuati on','speechRate ','stress',
'tableLayout',' textAlign','tex tDecoration','t extIndent',
'textShadow','t extTransform',' top','unicodeBi di','verticalAl ign',
'visibility','v oiceFamily','vo lume','whiteSpa ce','widows',
'width','wordSp acing','zIndex'
];

var nodeType_names = ['','ELEMENT_NOD E','ATTRIBUTE_N ODE','TEXT_NODE ',
'CDATA_SECTION_ NODE','ENTITY_R EFERENCE_NODE', 'ENTITY_NODE',
'PROCESSING_INS TRUCTION_NODE', 'COMMENT_NODE', 'DOCUMENT_NODE' ,
'DOCUMENT_TYPE_ NODE','DOCUMENT _FRAGMENT_NODE' ,'NOTATION_NODE '
];

</script>

</head>
<body>

<p>
Place some HTML mark-up here and then click on elements while holding
the shift key down. Do not remove or alter the following form/textarea
as they are used for output.
</p>

<form action="" name="f">
<div>
<textarea cols="95"rows=" 44" name="t"></textarea>
</div>
</form>

</div>
</body>
</html>

Richard.
Jul 23 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
5410
by: andreister | last post by:
He there! I've discovered that the ================================================= document.links('link_id_here').href = "something"; ================================================= is not applicable for the Firefox (even for the 1.0.6), and I'm falling into passing through the array and checking each link id.
3
7495
by: Chris Paul | last post by:
I'm having trouble with PHP & PostgreSQL/OpenLDAP/Apache on Windows. I've set this up countless times on BSD (piece of cake) but I'm trying to do this on Windows now so that my developer can work on her local machine. Everything looks pretty good. OpenLDAP/cygwin works great. PostgreSQL works great. Apache runs. PHP runs. But when I try to connect to my PostgreSQL server using PHPPgAdmin, I
8
4859
by: eggie5 | last post by:
Hi, I'm trying to set the class of an element on my page w/ javascript like this: function ResetNavigation(element) { element.className = "active"; }
2
2379
by: Robert | last post by:
Hello javascript group readers, I have a question regarding how to prevent memory leaks in Internet Explorer when using closures. I already knew about the circular reference problem, and until now was able to prevent memory leak problems. But I needed to store DOM elements and can't solve it anymore. So I search the group archive to see if I missed any valuable information. I found some interesting articles, but somehow could not apply...
1
2470
by: The Eclectic Electric | last post by:
I'd be very grateful if anyone could help me with this. From my limited knowledge of Javascript I don't think it is possible, but I'll punt anyway. I downloaded and very slightly adapted this guy's Javascript "combo box" - http://sandy.mcarthur.org/javascript/select/select.html. It allows my users (when I get some!) to select from a list of preexisting options and also to add a new one by clicking on "add new". Essentially it's a select...
9
2004
by: =?Utf-8?B?Sm9obiBCYWlsZXk=?= | last post by:
I have a ASP .Net page that allows moving around items on the page through javascript. This page works fine in IE. In FireFox however, I have found that if the page is using XHTML 1.0 Transitional as the doctype, you cannot set the style.left and style.top properties of image or div tags. If you remove the doctype from the page it works just fine, although I would rather not do this. You can work around this by setting the cssText...
29
4109
by: Chris Riesbeck | last post by:
I have an image with a class and the class defines a clip rectangle. In Firefox 2 and 3, and Opera 9, I can access the rectangle with document.defaultView.getComputedStyle(). But that doesn't seem to work in Safari for Windows 3, nor when I use image.currentStyle.clip in IE 7. Is there a way to do this in those browsers? Am I doing something stupid?
17
13609
by: Nyris | last post by:
I have this code used for the navigation on an HTML page. It's an accordion style dropdown menu. Everything works fine I just need to change it so that the submenuheader class allows it to be a clickable link. Right now all that happens with for example Home has two submenus of About Us and Quality. When you click home it expands the dropdown. But I want it to expand and also direct to a Home page. thanks in advance! var ddaccordion={...
4
2385
by: N00b13 | last post by:
I have a great JS menu but I have to update every page each time I want to change a link. Is there a way to store my links in a file and call it so i only change that file? (what I have tried so far has not worked, but then again my JS really never works :) ) my .js: if (typeof Scl == "undefined") { var Scl = {}; } (function()
0
9943
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
11151
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
10858
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10419
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7974
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5804
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5996
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
4225
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3237
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.