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).
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.
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.
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
}
}
}
[...]
Sign in to your account