[Javascript] Call for author for JS book revision

[David Hucklesby]

On Sat, 8 Nov 2008 13:29:27 -0500, Terry Riegel wrote:
> This is the test paragraph. Get CSS attributes
>
> This is the test paragraph1. Get CSS attributes1   I am doing this in IE only. My end
> goal is to build a rounded corner plug in for IE, all the other browsers support this
> natively so getting my "fix" to work with other browsers is not necessary. If I click
> on the button using the inline style="" tag the cssText property returns my styles, but
> if I move the styling to the head section then the cssText is empty. Any ideas on how I
> can determine the css properties for the second paragraph? Test page can be found at...
> http://clearimageonline.com/playground/roundedcorners/cssText.html Thanks, Terry Riegel


If you are trying to get the actual pixel dimensions of an element, 
here's how I do it, calling getAppliedPixels() with appropriate CSS
property names, e.g. getAppliedPixels(pElement, 'padding-bottom'); 
To get other properties, you only need toCamelCase() 
and getAppliedStyle(). (Using object notation here:)

  // toCamelCase and toPixels needed for IE only

  toCamelCase: function(sName) {
  // convert hyphenated name to camelCase (e.g. 'padding-top" becomes 'paddingTop')
    return sName.replace(/\-(\w)/g, function(sMatch, firstLetter){return firstLetter.toUpperCase()});
  },

  toPixels: function(sLength) {
    var result = null, units = '', loc = sLength.search(/[a-z]+/);
    units = (loc > 0) ? sLength.substr(loc) : sLength;
    switch(units) {
      case 'px':
        result = sLength.substr(0, loc);
        break;
      case 'em':
      case 'ex':
      case 'pt':
        var testDiv = fH.reference ? fH.reference : fH.createReference();
        testDiv.style.width = sLength;
        testDiv.style.height = sLength;
        fH.container.appendChild(testDiv);
        result = testDiv.offsetWidth;
        fH.container.removeChild(testDiv);
        break;
      case 'thin':
        result = 2;
        break;
      case 'medium':
        result = 4;
        break;
      case 'thick':
        result = 6;
        break;
      default:
        result = 0;
    }
    return result;
  },

  getAppliedPixels: function(element, CSSproperty) {
    // returns CSS property (length) value in number of pixels
    var len = fH.getAppliedStyle(element, CSSproperty);
    return (len.indexOf('px') > 0) ? parseInt(len) : parseInt(fH.toPixels(len));
  },

  getAppliedStyle: function(element, CSSproperty) {
    var CSSvalue = '';
    // CSSproperty is of the form "margin-left"; IE requires "marginLeft"
    if (element.currentStyle && !window.opera) {
      CSSvalue = element.currentStyle[fH.toCamelCase(CSSproperty)];
    } else if (window.getComputedStyle) {
      var computedStyle = window.getComputedStyle(element, '');
      if (computedStyle) CSSvalue = computedStyle.getPropertyValue(CSSproperty);
      CSSvalue = computedStyle ? computedStyle.getPropertyValue(CSSproperty) : 0;
    }
    return CSSvalue;
  },

Regarding proprietary properties like -moz-border-radius... the toCamelCase()
function should work. (Not tried it though.)

Cordially,
David
--