The following functions facilitate locating combinations of HTML and CSS that can trigger browser rendering bugs (for more information, refer to "The Browser Compatibility Check Issues API" chapter in Extending Dreamweaver), but they can also be used in other types of extensions (such as Commands).

Note:

The values that these functions return represent the styles currently in effect in Design view. When the functions are used in Issue files as part of a browser compatibility check, Dreamweaver automatically filters the styles based on how the target browsers would read them (for example, styles defined using Star HTML are taken into account if the target browser is Internet Explorer 6 or earlier), but this filtering is not done when you use the functions outside the scope of a browser compatibility check.

elem.getComputedStyleProp()

Availability

Dreamweaver CS3.

Description

Gets the value of the specified CSS property that is used to render the specified element, regardless of where the property is specified in the cascade. Lengths are reported in pixels (although, unlike the browsers, “px” is not specified with the value).

Arguments

propName, pseudoElt

  • The propName argument is the name of a CSS property (use intercaps in place of hyphens; for example, "font-size" would become "fontSize").

  • The pseudoElt argument is the CSS pseudoelement, or null if there is none.

Returns

A string containing the computed value for the property.

Note:

Numerical values are also returned as strings; to use these values in calculations, convert them to numbers with parseInt() or parseFloat().

Example

 var dom = dw.getDocumentDOM(); 
var myDiv = dom.getElementsByTagName('myDiv'); 
var float = myDiv.getComputedStyleProp("float"); 
if (float == "left") 
    alert("This div is floated left.");

window.getDeclaredStyle()

Availability

Dreamweaver CS3.

Description

Gets the CSS styles that are declared for the specified element. Differs from the getComputedStyle() function in that styles that are not specifically declared are undefined, and it gives actual length values as declared in the style sheet (e.g., 20%, .8em) rather than computed pixel values. If bGetInherited is false (default case), getDeclaredStyle() also gets only the styles that directly apply to the element; it does not include styles that are inherited from a parent.

Arguments

elt, pseudoElt, psuedoClassList, bGetInherited

  • elt - a node in the document whose style information is desired

  • pseudoElt - the CSS pseudoelement, or null if there is none

  • psuedoClassList - an optional string consisting of a space-separated list of pseudoclasses

  • bGetInherited - an optional Boolean value indicating whether to include styles inherited from ancestors (defaults to false).

Returns

A read-only object containing style properties that can be accessed by name.

Example

 var dom = dw.getDocumentDOM(); 
var myDiv = dom.getElementById('myDiv'); 
var props = window.getDeclaredStyle(myDiv); 
var marleft = ""; 
var units = ""; 
if (typeof(props.marginLeft) != "undefined"){ 
    marleft = props.marginLeft; 
    units = marleft.replace(/\d+/,""); // remove digits, leaving units 
    alert(units); // should show %, px, pt, em, etc. 
} 
else 
alert("no margin-left property has been set for myDiv.");

dom.getMinDisplayWidth()

Availability

Dreamweaver CS3.

Description

Gets the minimum width required for a block-level container to display its entire contents.

Note:

The actual width of the container could be smaller if a value less than the value that the dom.minDisplayWidth() function returns is specified by using CSS.

Arguments

container

  • container is the containing element for which a minimum width is required.

Returns

An integer representing the minimum display width of the specified container, in pixels, or -1 if the element is not a container or its minimum width cannot be determined

Example

 var dom = dw.getDocumentDOM(); 
var myDiv = dom.getElementById('myDiv'); 
var props = window.getComputedStyle(myDiv); 
var minW = dom.getMinDisplayWidth(myDiv); 
var setW = props.width; 
 if (minW > setW) 
alert("Depending on the browser, your content will either be \n" + 
        "clipped, or the container will expand beyond its set width.");

dom.getBlockElements() elem.getBlockElements()

Availability

Dreamweaver CS3.

Description

Scans the document (or element) for descendants with an inherent or specified display value of 'block'.

Arguments

None

Returns

An array of element nodes.

Example

 [...] 
var blocks = DOM.getBlockElements(); 
var dProps = null, children = null; 
for (var i=0; i < blocks.length; i++){ 
    // get the declared styles so we can see whether width 
    // or height have been specified explicitly 
    dProps = window.getDeclaredStyle(blocks[i]); 
    // if the block has children, border-left, and padding-bottom 
    // but no width or height 
    if (blocks[i].hasChildNodes() && | 
        issueUtils.hasBorder(blocks[i],null,"left") && 
        (parseFloat(blocks[i].getComputedStyleProp("padding-bottom")) > 0) && 
        typeof(dProps.width) == "undefined" && typeof(dProps.height) == "undefined"){ 
        children = blocks[i].getBlockElements(); 
        var hasLayout = false; 
        // loop through the block-level children to see if 
        // any have width or height defined. width or height on any 
        // of the children of the outer block will prevent the bug. 
         for (var j=0; j < children.length; j++){ 
            dProps = window.getDeclaredStyle(children[j]); 
            if (typeof(dProps.width) != "undefined" || typeof(dProps.height) != 
            "undefined"){ 
            hasLayout = true; 
                break; 
            } 
        } 
    [...] 
    } 
} 
[...]

dom.getInlineElements() elem.getInlineElements()

Availability

Dreamweaver CS3.

Description

Scans the document (or element) for descendents with an inherent or specified display value of 'inline'.

Arguments

None.

Returns

An array of element nodes.

Example

 [...] 
var DOM = dw.getDocumentDOM(); 
var inEls = DOM.body.getInlineElements(); 
var next = null, prev = null, parent = null; 
var props = null; 
 
// look through all inline elements for replaced elements. 
// if no replaced elements are found, don't bother going forward. 
for (var i=0; i < inEls.length; i++){ 
    if (inEls[i].tagName == 'IMG' || 
        inEls[i].tagName == 'INPUT' || 
        inEls[i].tagName == 'TEXTAREA' || 
        inEls[i].tagName == 'SELECT' || 
        inEls[i].tagName == 'OBJECT'){ 
        // do something 
    } 
} 
[...]

dom.getHeaderElements() elem.getHeaderElements()

Availability

Dreamweaver CS3.

Description

Scans the document (or element) for header tags (H1 to H6).

Arguments

None.

Returns

An array of element nodes.

Example

 var DOM = dw.getDocumentDOM(); 
var headers = DOM.getHeaderElements(); 
 
for (var i=0; i < headers.length; i++){ 
    alert(headers[i].tagName); 
}

dom.getListElements() elem.getListElements()

Availability

Dreamweaver CS3.

Description

Scans the document (or element) for ordered, unordered, and definition lists.

Arguments

None.

Returns

An array of element nodes.

Example

 [...] 
var DOM = dw.getDocumentDOM(); 
// get all the UL, OL, and DL elements in the document. 
var lists = DOM.getListElements(); 
var props = null; 
for (var i=0; i < lists.length; i++){ 
    props = window.getDeclaredStyle(lists[i]); 
    if ((props.cssFloat == "left" || props.cssFloat == "right") && props.overflow == "auto"){ 
        // do something 
    } 
} 
[...]

elem.isBlockElement()

Availability

Dreamweaver CS3.

Description

Checks whether the element has an inherent or specified display value of 'block'.

Arguments

None.

Returns

A Boolean value indicating whether the object is a block-level element.

Example

 [...] 
    var DOM = dw.getDocumentDOM(); 
    var blocks = DOM.body.getBlockElements(); 
    var next = null; 
    for (var i=0; i < blocks.length; i++){ 
        // next is the node right after blocks[i] 
        next = blocks[i].nextSibling; 
        // if next isn't null AND next is an element node AND next is a block element, 
        // we've met the "second of two consecutive block elements" test. 
        if (next && (next.nodeType == 1) && next.isBlockElement()){ 
        // do something 
    } 
} 
[...]

elem.isInlineElement()

Availability

Dreamweaver CS3.

Description

Checks whether the element has an inherent or specified display value of 'inline'.

Arguments

None.

Returns

A Boolean value indicating whether the object is an inline element.

Example

 [...] 
var DOM = dw.getDocumentDOM(); 
var floats = issueUtils.getFloats(DOM.body); 
var next = null; 
for (var i=0; i < floats.length; i++){ 
    next = floats[i].nextSibling; 
    // if nextSibling of float is a text node or an inline element 
    if (next && (next.nodeType == Node.TEXT_NODE || 
        (next.nodeType == Node.ELEMENT_NODE && next.isInlineElement()))){ 
    // do something 
    } 
} 
[...]

elem.isHeaderElement()

Availability

Dreamweaver CS3.

Description

Checks whether the element is one of the following tags: h1, h2, h3, h4, h5, h6.

Arguments

None.

Returns

A Boolean value indicating whether the object is a header element.

Example

 [...] 
var DOM = dw.getDocumentDOM(); 
var floats = issueUtils.getFloats(DOM.body); 
var prev = null; 
// first float in the document isn't affected, so start 
// at 1. 
for (var i=1; i < floats.length; i++){ 
    prev = floats[i].previousSibling; 
    // if the element before the float is a header 
    if (prev && prev.isHeaderElement()){ 
    // do something 
    } 
} 
[...]

elem.isListElement()

Availability

Dreamweaver CS3.

Description

Checks whether the element is one of the following tags: ul, ol, dl.

Arguments

None.

Returns

A Boolean value indicating whether the object is a list element.

Example

 [...] 
var DOM = dw.getDocumentDOM(); 
var floats = issueUtils.getFloats(DOM.body); 
var prev = null, children = null; 
for (var i=0; i < floats.length; i++){ 
    children = floats[i].childNodes; 
     for (var k=0; k < children.length; k++){ 
        if (children[k].isListElement()){ 
        // do something 
        } 
    } 
} 
[...]

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy