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

Discussion in 'Javascript' started by Michael Bierman, Mar 23, 2005.

  1. 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)


    }
    }
    }
    }
    }
     
    Michael Bierman, Mar 23, 2005
    #1
    1. Advertising

  2. Michael Bierman

    RobG Guest

    Re: Getting (and setting) a style value from a element that use aclass

    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
     
    RobG, Mar 24, 2005
    #2
    1. Advertising

  3. 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
     
    Michael Bierman, Mar 24, 2005
    #3
  4. 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(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.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
     
    Michael Bierman, Mar 24, 2005
    #4
  5. 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
     
    Michael Bierman, Mar 24, 2005
    #5
  6. Michael Bierman

    RobG Guest

    Re: Getting (and setting) a style value from a element that use aclass

    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(styleProp);
    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.style.color = y;
    }
    alert(msg);
    }


    --
    Rob
     
    RobG, Mar 25, 2005
    #6
  7. 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
     
    Michael Bierman, Mar 25, 2005
    #7
  8. Michael Bierman, Mar 25, 2005
    #8
  9. Michael Bierman

    RobG Guest

    Re: Getting (and setting) a style value from a element that use aclass

    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/webcontent/examples/styley_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
     
    RobG, Mar 26, 2005
    #9
  10. 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','CSS_GRAD',
    'CSS_MS','CSS_S','CSS_HZ','CSS_KHZ','CSS_DIMENSION','CSS_STRING',
    'CSS_URI','CSS_IDENT','CSS_ATTR','CSS_COUNTER','CSS_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','size',
    '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','backgroundColor',
    'backgroundImage','backgroundPosition','backgroundRepeat','border',
    'borderCollapse','borderColor','borderSpacing','borderStyle',
    'borderTop','borderRight','borderBottom','borderLeft',
    'borderTopColor','borderRightColor','borderBottomColor',
    'borderLeftColor','borderTopStyle','borderRightStyle',
    'borderBottomStyle','borderLeftStyle','borderTopWidth',
    'borderRightWidth','borderBottomWidth','borderLeftWidth',
    'borderWidth','bottom','captionSide','clear','clip',
    'color','content','counterIncrement','counterReset',
    'cue','cueAfter','cueBefore','cursor','direction','display',
    'elevation','emptyCells','cssFloat','font','fontFamily',
    'fontSize','fontSizeAdjust','fontStretch','fontStyle','fontVariant',
    'fontWeight','height','left','letterSpacing','lineHeight',
    'listStyle','listStyleImage','listStylePosition','listStyleType',
    'margin','marginTop','marginRight','marginBottom','marginLeft',
    'markerOffset','marks','maxHeight','maxWidth','minHeight',
    'minWidth','orphans','outline','outlineColor','outlineStyle',
    'outlineWidth','overflow','padding','paddingTop','paddingRight',
    'paddingBottom','paddingLeft','page','pageBreakAfter',
    'pageBreakBefore','pageBreakInside','pause','pauseAfter',
    'pauseBefore','pitch','pitchRange','playDuring','position',
    'quotes','richness','right','size','speak','speakHeader',
    'speakNumeral','speakPunctuation','speechRate','stress',
    'tableLayout','textAlign','textDecoration','textIndent',
    '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','ENTITY_NODE',
    'PROCESSING_INSTRUCTION_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.
     
    Richard Cornford, Mar 29, 2005
    #10
  11. Re: Getting (and setting) a style value from a element that use aclass

    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.
     
    Michael Winter, Mar 29, 2005
    #11
  12. 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.
     
    Richard Cornford, Mar 29, 2005
    #12
  13. Richard Cornford wrote:

    > It has been suggested (but only by Thomas 'FruitCake' Lahn) [...]


    Do you like fruit cakes that much, Richard Cornflakes?


    PointedEars
     
    Thomas 'PointedEars' Lahn, Apr 3, 2005
    #13
  14. 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
     
    Michael Bierman, Apr 4, 2005
    #14
  15. JRS: In article <>, dated Sun, 3 Apr
    2005 14:04:33, seen in news:comp.lang.javascript, Thomas 'PointedEars'
    Lahn <> 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.
     
    Dr John Stockton, Apr 5, 2005
    #15
  16. 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
     
    Michael Bierman, Apr 7, 2005
    #16
  17. 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.
     
    Richard Cornford, Apr 8, 2005
    #17
  18. Re: Getting (and setting) a style value from a element that use aclass

    "Michael Bierman" <> 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 -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Apr 8, 2005
    #18
  19. **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 ***
     
    Michael Bierman, Apr 11, 2005
    #19
  20. ** 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 ***
     
    Michael Bierman, Apr 11, 2005
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. dlo_olb
    Replies:
    2
    Views:
    2,350
    Fredrik Lundh
    Jun 25, 2003
  2. HANM
    Replies:
    2
    Views:
    751
    Joseph Kesselman
    Jan 29, 2008
  3. Ken Varn
    Replies:
    0
    Views:
    506
    Ken Varn
    Apr 26, 2004
  4. Amir Hardon
    Replies:
    0
    Views:
    283
    Amir Hardon
    May 31, 2004
  5. Jayden
    Replies:
    9
    Views:
    309
    alex23
    Sep 27, 2012
Loading...

Share This Page