473,327 Members | 2,074 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

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.getElementsByTagName('*');
} else {
elements = document.getElementsByTagName(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.attributes.item(j).nodeName == 'class') {
if(node.attributes.item(j).nodeValue == 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.defaultView && document.defaultView.getComputedStyle){

c_style = document.defaultView.getComputedStyle(TD,
'').getPropertyValue("color");
// alert("text color is: " + c_style);
// alert('DOM way: '+ c_style);
}
else if(document.uniqueID && c_style.currentStyle){
// IS INTERNET EXPLORER //
alert('IE way:' );
}

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

Jul 23 '05 #1
21 3905
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.getElementsByTagName('*');
Browser sniffing is never a good idea. Why not feature testing, and
test for the most widely supported feature first:

if (document.getElementsByTagName) {
elements = document.getElementsByTagName('*');
} 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.style.' + 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.txt>

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="doColour(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="doColour(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.style.color);
this.style.color = '';
">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 getComputedStyle (Mozilla et al)
if (window.getComputedStyle) {
c = document.defaultView.getComputedStyle(a,
'').getPropertyValue('color');

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

// Apply color to element
if (c) {
if (document.getElementById) {
document.getElementById(b).style.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,styleProp)
{
var x = document.getElementById(el);
alert("var x is: " + x);
if (window.getComputedStyle) {
var y = window.getComputedStyle(x,null).getPropertyValue(s tyleProp);
alert("We're using Mozilla" + "\n" + "value is: " + y);
// set the value of the color here.
}
else if (x.currentStyle) {
var y = eval('x.currentStyle.' + 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=\'getStyle("barney","color");\'\/>');
document.write('&nbsp;&nbsp;&nbsp;');

// document.write('<input type="button" value="Hide color"
id="colorToggle" accesskey="1" tabIndex="1" title="Remove all body text
color" onClick=\'setStyleByTag("font","color","black",1); \'\/>');
// document.write('&nbsp;&nbsp;&nbsp;');
document.write('<input type="button" id="colorToggle2" accesskey="2"
tabIndex="2" value="Show color" title="Reapply body text color"
onClick=\'history.go()\' \/>');
// setStyleByClass("openMessageBody","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,styleProp)
{
var x = document.getElementById(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 getElementsByTagName and getElementById.

I've assumed you want to change everything inside the TD, hence
my use of getElementsByTagName('*'). 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,styleProp) {
var x = document.getElementById(el);
var msg = 'x is a : ' + x.nodeName;
if (window.getComputedStyle) {
var y =
window.getComputedStyle(x,null).getPropertyValue(s tyleProp);
msg += ('\nUsing getComputedStyle: ' + 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.getElementsByTagName('*');
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 getComputedStyle() 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 getComputedStyle() 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.getComputedStyle or
element.currentStyle.

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 getComputedStyle (Mozilla et al)
if (window.getComputedStyle) {
c = document.defaultView.getComputedStyle(a,
'').getPropertyValue('color');

<snip>

There is a logical inconstancy in feature testing for -
window.getComputedStyle - and then using
document.defaultView.getComputedStyle. 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.defaultView - 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 -
getComputedStyle - 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 - getComputedStyle - 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 - getPropertyValue
- method of the - CSSStyleDeclaration - implementing object that is
returned by a call to - getComputedStyle - 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 - getPropertyValue -, 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 - getPropertyValue -
you can use - getPropertyCSSValue - 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 - getPropertyValue - may take any of a number of valid CSS forms
depending on the browser.

The problem with - getPropertyCSSValue - is that it is not universally
implemented. Opera 7, for example, does not implement it, leaving no
choice but to fall back to - getPropertyValue. But I have found that
preferring - getPropertyCSSValue - and then falling back to -
getPropertyValue - 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.addEventListener && 2)||
(global.attachEvent && 3)|| 0;
function getStackFunc(next, 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(funcRef, arg1,arg2,arg3,arg4){
if(base){
base.addItem(getStackFunc(null, funcRef, arg1,arg2,arg3,arg4));
}else{
base = getStackFunc(null, funcRef, arg1,arg2,arg3,arg4);
}
if(!safe){
switch(listenerType){
case 2:
global.addEventListener("load", base, false);
safe = true;
break;
case 3:
global.attachEvent("onload", base);
safe = true;
break;
default:
if(global.onload != base){
if(global.onload){
base.addItem(getStackFunc(null, global.onload));
}
global.onload = base;
}
break;
}
}
});
})();

function doMouseDown(ev){
var target, indent = '\n';
var text = '';
ev = ev||global.event;
if(ev.shiftKey){
target = ev.target||ev.srcElement;
if(target){
text += getComputedCSSInfo(target);
if(typeof target.offsetWidth == 'number'){
text += indent + 'target.offsetWidth == '+target.offsetWidth;
text += indent + 'target.offsetHeight == '+target.offsetHeight;
text += indent + 'target.offsetLeft == '+target.offsetLeft;
text += indent + 'target.offsetTop == '+target.offsetTop;
}
if(typeof target.clientWidth == 'number'){
text += indent + 'target.clientWidth == '+target.clientWidth;
text += indent + 'target.clientHeight == '+target.clientHeight;
text += indent + 'target.clientLeft == '+target.clientLeft;
text += indent + 'target.clientTop == '+target.clientTop;
}
if(typeof target.scrollWidth == 'number'){
text += indent + 'target.scrollWidth == '+target.scrollWidth;
text += indent + 'target.scrollHeight == '+target.scrollHeight;
text += indent + 'target.scrollLeft == '+target.scrollLeft;
text += indent + 'target.scrollTop == '+target.scrollTop;
}
}else{
text += 'No target';
}
frmEl.t.value = text;
return false;
}
}

InitializeMe(function(){
frmEl = document.forms.f.elements;
document.onmousedown = doMouseDown;
});

var frmEl;
var global = this;

function getComputedCSSInfo(element){
var indent = '\n';
var temp,cs,defaultView,text = '';
if(element){
if(element.tagName){
text += '<'+element.tagName+'>\n';
}else if(element.nodeName){
text += 'Node Name == ['+element.nodeName+']\n';
}
if(element.nodeType){
text += 'Node Type == '+nodeType_names[element.nodeType]+'\n';
}
if(element.id){
text += 'ID == \"'+element.id+'\"\n';
}
if(element.className){
text += 'className == \"'+element.className+'\"\n';
}
if(
(defaultView = document.defaultView)&&
(defaultView.getComputedStyle) &&
(cs = defaultView.getComputedStyle(element, null))
){
for(var c = 0;c < CSSProprety_names.length;c++){
temp = cs.getPropertyValue(CSSProprety_names[c]);
if(typeof temp != 'undefined'){
text += indent + 'String value from - getPropertyValue(\''+
CSSProprety_names[c]+'\') == \"'+temp+'\"';
}
temp = cs[CSSStyleProperties_names[c]];
if(typeof temp != 'undefined'){
text += indent +
(typeof temp) +
' value from - computedStyleObject.'+
CSSStyleProperties_names[c]+' == \"'+temp+'\"';
}
if( cs.getPropertyCSSValue){
temp = cs.getPropertyCSSValue(CSSProprety_names[c]);
if(temp){
text += indent +
'CSSValue object from - getPropertyCSSValue(\''+
CSSProprety_names[c]+'\') == ';
text += CSSValueReport(temp, (indent+'\t'));
}
}
if(typeof temp != 'undefined'){text += indent;}
}
}else if(element.currentStyle){
for(var c = 0;c < CSSStyleProperties_names.length;c++){
temp = element.currentStyle[CSSStyleProperties_names[c]];
if(typeof temp != 'undefined'){
text += indent +
'String value from - element.currentStyle.'+
CSSStyleProperties_names[c]+' == \"'+temp+'\"';
text += indent;
}
}
}
}
return text;
}

function CSSValueReport(cssValue, indent){
var type = cssValue.cssValueType;
var st = indent+'CSSValue Type == '+type+' -> '+
(CSSValueType_names[type]||'not a specified type');
switch(type){
case 0: //CSS_INHERIT
st += indent+'The value is inherited : data == '+
cssValue.cssText;
break;
case 1: //CSS_PRIMITIVE_VALUE
st += CSSPrimativeReport(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.cssText;
break;
default:
break;
}
return st;
}
function CSSPrimativeReport(cssValue, indent){
var temp,type = cssValue.primitiveType;
var st = indent+'CSSPrimitiveValue Type == '+type+' -> '+
(CSSPrimativeType_names[type]||'not a specified type');
switch(type){
case 0: //CSS_UNKNOWN
st += indent+
'Value is not a recognized CSS2 value: data == '+
cssValue.cssText;
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.getFloatValue(type);
st += tryLengthConversion(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.getFloatValue(type);
st += tryOtherConversion(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.getStringValue()+'\"';
break;

case 23: //CSS_COUNTER
temp = cssValue.getCounterValue();
st += indent+'Counter.identifier == '+temp.identifier;
st += indent+'Counter.listStyle == '+temp.listStyle;
st += indent+'Counter.separator == '+temp.separator;
break;

case 24: //CSS_RECT
temp = cssValue.getRectValue();
st += indent+'Rect.top == '+
CSSPrimativeReport(temp.top, (indent+'\t'));
st += indent+'Rect.left == '+
CSSPrimativeReport(temp.left, (indent+'\t'));
st += indent+'Rect.bottom == '+
CSSPrimativeReport(temp.bottom, (indent+'\t'));
st += indent+'Rect.rigth == '+
CSSPrimativeReport(temp.right, (indent+'\t'));
break;

case 25: //CSS_RGBCOLOR
temp = cssValue.getRGBColorValue();
st += indent+'RGBColor.red == '+
CSSPrimativeReport(temp.red, (indent+'\t'));
st += indent+'RGBColor.green == '+
CSSPrimativeReport(temp.green, (indent+'\t'));
st += indent+'RGBColor.blue == '+
CSSPrimativeReport(temp.blue, (indent+'\t'));
break;

default:
break;
}
return st;
}

function tryLengthConversion(cssValue, indent){
var temp,type = cssValue.primitiveType;
var st = indent+'Length Values -> ';
try{ //CSS_NUMBER
st += indent+'CSS_NUMBER value == '+cssValue.getFloatValue(1);
}catch(e){
st += indent+'Cannot Convert to CSS_NUMBER (exception)';
}
try{ //CSS_PERCENTAGE
st += indent+'CSS_PERCENTAGE value == '+
cssValue.getFloatValue(2);
}catch(e){
st += indent+'Cannot Convert to CSS_PERCENTAGE (exception)';
}
try{ //CSS_EMS
st += indent+'CSS_EMS value == '+ cssValue.getFloatValue(3);
}catch(e){
st += indent+'Cannot Convert to CSS_EMS (exception)';
}
try{ //CSS_EXS
st += indent+'CSS_EXS value == '+ cssValue.getFloatValue(4);
}catch(e){
st += indent+'Cannot Convert to CSS_EXS (exception)';
}
try{ //CSS_PX
st += indent+'CSS_PX value == '+ cssValue.getFloatValue(5);
}catch(e){
st += indent+'Cannot Convert to CSS_PX (exception)';
}
try{ //CSS_CM
st += indent+'CSS_CM value == '+ cssValue.getFloatValue(6);
}catch(e){
st += indent+'Cannot Convert to CSS_CM (exception)';
}
try{ //CSS_MM
st += indent+'CSS_MM value == '+ cssValue.getFloatValue(7);
}catch(e){
st += indent+'Cannot Convert to CSS_MM (exception)';
}
try{ //CSS_IN
st += indent+'CSS_IN value == '+ cssValue.getFloatValue(8);
}catch(e){
st += indent+'Cannot Convert to CSS_IN (exception)';
}
try{ //CSS_PT
st += indent+'CSS_PT value == '+ cssValue.getFloatValue(9);
}catch(e){
st += indent+'Cannot Convert to CSS_PT (exception)';
}
try{ //CSS_PC
st += indent+'CSS_PC value == '+ cssValue.getFloatValue(10);
}catch(e){
st += indent+'Cannot Convert to CSS_PC (exception)';
}
return st;
}

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

var CSSValueType_names = ['CSS_INHERIT','CSS_PRIMITIVE_VALUE',
'CSS_VALUE_LIST','CSS_CUSTOM'];

var CSSPrimativeType_names = [
'CSS_UNKNOWN','CSS_NUMBER',
'CSS_PERCENTAGE','CSS_EMS','CSS_EXS','CSS_PX','CSS _CM','CSS_MM',
'CSS_IN','CSS_PT','CSS_PC','CSS_DEG','CSS_RAD','CS S_GRAD',
'CSS_MS','CSS_S','CSS_HZ','CSS_KHZ','CSS_DIMENSION ','CSS_STRING',
'CSS_URI','CSS_IDENT','CSS_ATTR','CSS_COUNTER','CS S_RECT',
'CSS_RGBCOLOR'];

var CSSProprety_names = [
'azimuth','background','background-attachment','background-color',
'background-image','background-position','background-repeat',
'border','border-collapse','border-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','content','counter-increment',
'counter-reset','cue','cue-after','cue-before','cursor',
'direction','display','elevation','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','outline','outline-color','outline-style',
'outline-width','overflow','padding','padding-top',
'padding-right','padding-bottom','padding-left','page',
'page-break-after','page-break-before','page-break-inside',
'pause','pause-after','pause-before','pitch','pitch-range',
'play-during','position','quotes','richness','right','si ze',
'speak','speak-header','speak-numeral','speak-punctuation',
'speech-rate','stress','table-layout','text-align',
'text-decoration','text-indent','text-shadow','text-transform',
'top','unicode-bidi','vertical-align','visibility','voice-family',
'volume','white-space','widows','width','word-spacing','z-index'
];

var CSSStyleProperties_names = [
'azimuth','background','backgroundAttachment','bac kgroundColor',
'backgroundImage','backgroundPosition','background Repeat','border',
'borderCollapse','borderColor','borderSpacing','bo rderStyle',
'borderTop','borderRight','borderBottom','borderLe ft',
'borderTopColor','borderRightColor','borderBottomC olor',
'borderLeftColor','borderTopStyle','borderRightSty le',
'borderBottomStyle','borderLeftStyle','borderTopWi dth',
'borderRightWidth','borderBottomWidth','borderLeft Width',
'borderWidth','bottom','captionSide','clear','clip ',
'color','content','counterIncrement','counterReset ',
'cue','cueAfter','cueBefore','cursor','direction', 'display',
'elevation','emptyCells','cssFloat','font','fontFa mily',
'fontSize','fontSizeAdjust','fontStretch','fontSty le','fontVariant',
'fontWeight','height','left','letterSpacing','line Height',
'listStyle','listStyleImage','listStylePosition',' listStyleType',
'margin','marginTop','marginRight','marginBottom', 'marginLeft',
'markerOffset','marks','maxHeight','maxWidth','min Height',
'minWidth','orphans','outline','outlineColor','out lineStyle',
'outlineWidth','overflow','padding','paddingTop',' paddingRight',
'paddingBottom','paddingLeft','page','pageBreakAft er',
'pageBreakBefore','pageBreakInside','pause','pause After',
'pauseBefore','pitch','pitchRange','playDuring','p osition',
'quotes','richness','right','size','speak','speakH eader',
'speakNumeral','speakPunctuation','speechRate','st ress',
'tableLayout','textAlign','textDecoration','textIn dent',
'textShadow','textTransform','top','unicodeBidi',' verticalAlign',
'visibility','voiceFamily','volume','whiteSpace',' widows',
'width','wordSpacing','zIndex'
];

var nodeType_names = ['','ELEMENT_NODE','ATTRIBUTE_NODE','TEXT_NODE',
'CDATA_SECTION_NODE','ENTITY_REFERENCE_NODE','ENTI TY_NODE',
'PROCESSING_INSTRUCTION_NODE','COMMENT_NODE','DOCU MENT_NODE',
'DOCUMENT_TYPE_NODE','DOCUMENT_FRAGMENT_NODE','NOT ATION_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
On 29/03/2005 15:28, Richard Cornford wrote:

[The global object implementing getComputedStyle]
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.
This issue has had me wondering. Whilst defining a relationship
between AbstractView and the global object does have some logic -
particularly as the View specification makes references to frames in
the introduction - it's also flawed, not just because there is no
specified binding, but that I think it's questionable to consider the
global object as part of the document itself.

I think the same is also true for other Node-level interfaces. For
instance, Mozilla implements EventTarget methods on the global object,
though interesting Opera does not.

[snip]
As the - AbstractView - interface only has one property defined in
DOM Views and that property is - document -, referring to the
document object,


It's perhaps a little misleading to say "the document object", as the
the Views module is meant to allow for any particular representation
of the document tree. This is perhaps another argument against the
global object implementing AbstractView: it's doesn't provide a
representation of the document, it just contains the document object
as a property.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #11
Michael Winter wrote:
On 29/03/2005 15:28, Richard Cornford wrote: <snip>
... implementations decisions that are true
in Mozilla/Gecko and Opera 7+, but not
necessarily true in other environments.


This issue has had me wondering. Whilst defining a relationship
between AbstractView and the global object does have some logic -
particularly as the View specification makes references to frames
in the introduction - it's also flawed, not just because there
is no specified binding, but that I think it's questionable to
consider the global object as part of the document itself.


There is nothing but established precedent to say that the window object
(the browser object model's root object) should correspond with the
ECMAScript global object. And the W3C DOM working group have steered
very clear of saying anything about window objects or ECMAScript global
object (even in the ECMAScript bindings).

It has been suggested (but only by Thomas 'FruitCake' Lahn) that it was
the intent of the DOM Views specification that the window/global object
should be the one implementing the AbstractView interface, but the
specification says no such thing. Any Intent in that direction could
have been unambiguously expressed in words so the absence of those words
implies that there was no intent (or that the issue was fudged as a
concession to those who could see that a _document_ object model should
have no interest in what happens outside of the document).
I think the same is also true for other Node-level interfaces.
For instance, Mozilla implements EventTarget methods on the
global object, though interesting Opera does not.


I am not so sure that EventTarget is a good example (or a problem). I
wouldn't expect the global/window object to be involved in event capture
or bubbling related to the document, but there are browser object model
specific events associated with the window object and it doesn't seem
that unreasonable to provide a familiar mechanism for providing event
listeners on the window object.

<snip>
... that property is - document -, referring to the
document object,


It's perhaps a little misleading to say "the document object",
as the the Views module is meant to allow for any particular
representation of the document tree. ...

<snip>

Fair enough, not the best choice of words on my part.

Richard.
Jul 23 '05 #12
Richard Cornford wrote:
It has been suggested (but only by Thomas 'FruitCake' Lahn) [...]


Do you like fruit cakes that much, Richard Cornflakes?
PointedEars
Jul 23 '05 #13
Richard,

Thank you for your very in depth reply. I am afraid that I haven't
fully absorbed it all yet so perhaps you could help me sift through it
in a few respects? I'm not expert enough about the DOM and Javascript
to appreciate the full explanation.

Here's my translation:

1. Test for what you intend to use. (makes sense to me.)

2. There is discrepancy between the W3C recommendations and browser
implementations. (not unusual, unfortunately.)

3. "getComputedStyle - 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."

Unfortunately, I can't figure out how to apply the example cited at
http://www.thebiermans.net/junk/stumped.html

Is there a way to achieve what that script does in 18 lines for
Firefox, IE, Safri, Konqueror, Opera, and Netscape? Those are in order
of priority and pragmatically I am not particularly concerned about
other browsers and could settle for the first 4 if necessary.

Regards.

Michael

Jul 23 '05 #14
JRS: In article <37****************@PointedEars.de>, dated Sun, 3 Apr
2005 14:04:33, seen in news:comp.lang.javascript, Thomas 'PointedEars'
Lahn <Po*********@web.de> posted :
Richard Cornford wrote:
It has been suggested (but only by Thomas 'FruitCake' Lahn) [...]


Do you like fruit cakes that much, Richard Cornflakes?


Further proof of your puerility is superfluous.

You have already been warned of the possible consequences to your
prospects if a future possible employer should choose to check up on
your Usenet usage; no-one sensible will employ a proven misfit.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME ©
Web <URL:http://www.uwasa.fi/~ts/http/tsfaq.html> -> Timo Salmi: Usenet Q&A.
Web <URL:http://www.merlyn.demon.co.uk/news-use.htm> : about usage of News.
No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.
Jul 23 '05 #15
This conversation has gone some interesting places, but the original
question hasn't been answered. Anybody know how to achive the goal?

Sorry to be so pragmatic.

Thanks everybody!

Michael

Jul 23 '05 #16
Michael Bierman wrote:
This conversation has gone some interesting places, but
the original question hasn't been answered. Anybody know
how to achive the goal?
You manifest disregard for the long established Usenet posting
conventions is an overriding indicator that you do not wish to be
helped, despite any protestations you may make to the contrary.
Sorry to be so pragmatic.


Pragmatic enough to read the group's FAQ and take heed of what it says?

Richard.
Jul 23 '05 #17
"Michael Bierman" <mi*************@gmail.com> writes:
This conversation has gone some interesting places, but the original
question hasn't been answered. Anybody know how to achive the goal?


I am not sure I understand the question (and not just because it's
only in the subject line, which is bad style). Why does it matter that
the element has a class attribute?

Setting (as any other element):

element.style.color = "red";

Getting (as any other element):

in IE:
elemColor = element.currentStyle.color;
in DOM-compliant browsers (Gecko, Opera 7+, maybe KHTML)
elemColor = document.defaultView.getComputedStyle(element,""). color

You might be thinking that elements without a class property can have
their styles read by using "element.style.color". That is not the case,
unless you *know* that the particular style property has been assigned
to the element's private style object (either through scripting, or
using the corresponding HTML "style" attribute).

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #18
**You manifest disregard for the long established Usenet posting
conventions is an overriding indicator that you do not wish to be
helped, despite any protestations you may make to the contrary. **

Hmm... The only complaint I've seen was, "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."

I quickly apologized for any unintended breach of netiquette in that
regard. As a side note, I don't see anything in the FAQ
(http://www.developersdex.com/asp/faq.asp) for this group that even
deals with anything in this posting.

I think your reaction is overly harsh or at least you haven't described
what you are upset about.

There seems to be some quarrel amongst others on this list that I don't
understand and have no part in. I was just looking for the answer to a
specific question for which I've posted a specific example. Of course
people are free to choose to help or not, but I see nothing unreasonable
about what I've asked, or how I've asked it (with the exception of the
faux pas of using tabs in my first posting. Mea culpa on that.

Michael

*** Sent via Developersdex http://www.developersdex.com ***
Jul 23 '05 #19
** I am not sure I understand the question (and not just because it's
only in the subject line, which is bad style). **

The first and third postings I gave description of the situation and
asked the question. I'll summarize. The specific question is the last
sentence of this posting. Everything up to that point is provided to
explain the situation.

As I then said earlier, the example is at
http://www.thebiermans.net/junk/stumped.html as it says, "Ideally, what
should happen is when you click on the "Hide Color" button, all the text
in the td element should match whatever the current colour is. By
default, this is now yellow."

Initially, some of the text has a color set inline ala <td
id="barney">Cell_1<font color="red"> red</font></td>

And I want to a) find the current "default" color the text in the TD
(excluding what is set inline) b) override all of the inline color
settings to match the color found in step A.

** Why does it matter that the element has a class attribute? **

Because I don't want to change the color of everyting on the page.
Initially I was trying to avoid setting an ID at all--long story there--
and there happened to be a class associated with the text I was so
looking to match so I thought that was a reasonable way to specify which
telement I was looking for. Ultimately I relented on setting an ID and
the code I have now (see the URL above) works on IE (Win) Firefox,
Netscape but not Konqueror or Safari. That's the bit I am looking to
solve--how do I a) find the current value of the text and then override
any inline settings on those two browsers?

Thanks.

Michael

*** Sent via Developersdex http://www.developersdex.com ***
Jul 23 '05 #20
JRS: In article <hR**************@news.uswest.net>, dated Mon, 11 Apr
2005 08:48:13, seen in news:comp.lang.javascript, Michael Bierman
<mi*************@gmail.com> posted :

I quickly apologized for any unintended breach of netiquette in that
regard. As a side note, I don't see anything in the FAQ
(http://www.developersdex.com/asp/faq.asp) for this group that even
deals with anything in this posting.
The FAQ of this Usenet newsgroup, written by users of this Usenet
newsgroup, is posted in this Usenet newsgroup every week; the rightful
URL of its Web version appears quite often in article signatures.

I have as yet no idea (being an off-line reader) what that URL may
contain; but if it *is* the FAQ of this Usenet newsgroup, then it is
probably in breach of copyright, since the FAQ of this Usenet newsgroup
seems not to mention that location.

If you get yourself a proper standards-compliant newsreader rather than
relying on unauthorised Web interfaces, then you can expect better
results.

Unauthorised Web interfaces have been known to censor articles that they
don't like; if you don't see this, the rest of us will know why.
But, FYI, <FAQENTRY>
Keith Thompson wrote in comp.lang.c, message ID
<ln************@nuthaus.mib.org> :-
If you want to post a followup via groups.google.com, don't use
the "Reply" link at the bottom of the article. Click on "show options"
at the top of the article, then click on the "Reply" at the bottom of
the article headers.
Another Michael Bierman article :This conversation has gone some interesting places, but the original
question hasn't been answered. Anybody know how to achive the goal?


When that stage is reached, it is better to restate the problem; not the
original one, but the present one, derived from the original but
modified in the light of responses.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 23 '05 #21
Michael Bierman wrote:
**You manifest disregard for the long established Usenet posting
conventions is an overriding indicator that you do not wish to be
helped, despite any protestations you may make to the contrary. **
Man, learn how to quote. This is not a bulletin board.
[...]
I quickly apologized for any unintended breach of netiquette in that
regard.
Newbie rule of thumb no. 1: Don't post lengthy apologies for wrong behavior
but just learn and make it better second time. Apologies only decrease the
S/N ratio of regulars.
As a side note, I don't see anything in the FAQ
(http://www.developersdex.com/asp/faq.asp) for this group that even
deals with anything in this posting.
The FAQ for this group is located at <http://jibbering.com/faq/> as already
posted.
I think your reaction is overly harsh or at least you haven't described
what you are upset about.
I think you don't have any clue where you are posting to.
Hint: http://en.wikipedia.org/wiki/Usenet
There seems to be some quarrel amongst others on this list [...]
This is not a mailing list, it is a public newsgroup. You are accessing
the global distributed Usenet via a flawed Web interface while reasonable
people use NetNews clients that conform to Internet standards instead.
[...] I don't understand [...]
This much is true.
I was just looking for the answer to a specific question for which I've
posted a specific example.


But this is not a paid support forum where you have a right to get what
you want.
PointedEars
Jul 23 '05 #22

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

Similar topics

10
by: andreister | last post by:
He there! I've discovered that the ================================================= document.links('link_id_here').href = "something"; ================================================= is...
3
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...
8
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
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...
1
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...
9
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...
29
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...
17
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...
4
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...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....

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.