CSS functions

CSS functions handle applying, removing, creating, and deleting CSS styles. Methods of the dreamweaver.cssRuleTracker object either control or act on the selection in the CSS rule tracker panel of the Selection inspector. Methods of the dreamweaver.cssStylePalette object either control or act on the selection in the Styles panel, not in the current document.

cssStylePalette.getInternetExplorerRendering()

Availability

Dreamweaver 8.

Description

This function determines whether Dreamweaver is rendering for Internet Explorer.

Arguments

None.

Returns

A Boolean value: true if Dreamweaver is rendering for Internet Explorer; false if Dreamweaver is rendering to the CSS specification.

Example

The following example turns off rendering for Internet Explorer:

 if (cssStylePalette.getInternetExplorerRendering()){   cssStylePalette.setInternetExplorerRendering(false);  } 

cssStylePalette.setInternetExplorerRendering()

Availability

Dreamweaver 8.

Description

This function instructs Dreamweaver to render for Internet Explorer or the CSS specification.

Arguments

 internetExplorerRendering 

• The internetExplorerRendering argument, which is required, indicates whether to render for Internet Explorer (TRue) or to render for the CSS specification (false).

Returns

Nothing.

Example

See "cssStylePalette.getInternetExplorerRendering()" on page 923.

dom.applyCSSStyle()

Availability

Dreamweaver 4.

Description

Applies the specified style to the specified element. This function is valid only for the active document.

Arguments

 elementNode, styleName, {classOrID}, {bForceNesting} 

• The elementNode argument is an element node in the DOM. If the elementNode argument is a null value or an empty string (""), the function acts on the current selection.

• The styleName argument is the name of a CSS style.

• The classOrID argument, which is optional, is the attribute with which the style should be applied (either "class" or "id"). If the elementNode argument is a null value or an empty string and no tag exactly surrounds the selection, the style is applied using SPAN tags. If the selection is an insertion point, Dreamweaver uses heuristics to determine to which tag the style should be applied.

• The bForceNesting argument, which is optional, is a Boolean value, which indicates whether nesting is allowed. If the bForceNesting flag is specified, Dreamweaver inserts a new SPAN tag instead of trying to modify the existing tags in the document. This argument defaults to a false value if it is not specified.

Returns

Nothing.

Example

The following code applies the red style to the selection, either by surrounding the selection with SPAN tags or by applying a CLASS attribute to the tag that surrounds the selection:

 var theDOM = dreamweaver.getDocumentDOM('document'); theDOM.applyCSSStyle('','red'); 

dom.getElementView()

Availability

Dreamweaver 8.

Description

This function gets the Element view for the currently selected element in the document. If the currently selected element is normal, the getElementView() function looks for the selected element's first ancestor that is either full or hidden.

Arguments

None.

Returns

A string that indicates the status of the selected element. Values include:

• "hidden", which indicates that the element has CSS properties that may cause content to be partially or completely hidden in Design view. Supported CSS properties include:

  • overflow: hidden, scroll, or auto

  • display: none

• "full", which indicates that the element is "hidden" by default, but is currently in "full" view as set by the setElementView("full") function.

• "normal", which indicates that the element is neither "hidden" nor "full".

Example

The following example changes the status of the selected element to "full" if it is "hidden":

 var currentDOM = dw.getDocumentDOM(); if (currentDOM && getElementView() == "hidden"){   currentDOM.setElementView("full");   } 

dom.getShowDivBackgrounds()

Availability

Dreamweaver 8.

Description

This function gets the state of the Layout Block Backgrounds visual aid.

Arguments

None.

Returns

A Boolean; true if the Layout Block Backgrounds visual aid is on; false otherwise.

Example

The following example checks whether the Layout Block Backgrounds visual aid is on and, if not, turns it on:

 var currentDOM = dw.getDocumentDOM(); if (currentDOM.getShowDivBackgrounds() == false){   currentDOM.setShowDivBackgrounds(true);   } 

dom.getShowDivBoxModel()

Availability

Dreamweaver 8.

Description

This function gets the state of the Layout Block Box Model visual aid.

Arguments

None.

Returns

A Boolean; true if the Layout Block Box Model visual aid is on; false otherwise.

Example

The following example checks whether the Layout Block Box Model visual aid is on and, if not, turns it on:

 var currentDOM = dw.getDocumentDOM(); if (currentDOM.getShowDivBoxModel() == false){   currentDOM.setShowDivBoxModel(true);   } 

dom.getShowDivOutlines()

Availability

Dreamweaver 8.

Description

This function gets the state of the Layout Block Outlines visual aid.

Arguments

None.

Returns

A Boolean; true if the Layout Block Outlines visual aid is on; false otherwise.

Example

The following example checks whether the Layout Block Outlines visual aid is on and, if not, turns it on:

 var currentDOM = dw.getDocumentDOM(); if (currentDOM.getShowDivOutlines() == false){   currentDOM.setShowDivOutlines(true);   } 

dom.removeCSSStyle()

Availability

Dreamweaver 3.

Description

Removes the CLASS or ID attribute from the specified element, or removes the SPAN tag that completely surrounds the specified element. This function is valid only for the active document.

Arguments

 elementNode, {classOrID} 

• The elementNode argument is an element node in the DOM. If the elementNode argument is specified as an empty string (" "), the function acts on the current selection.

• The classOrID argument, which is optional, is the attribute that should be removed (either "class" or "id"). If the classOrID argument is not specified, it defaults to "class". If no CLASS attribute is defined for the elementNode argument, the SPAN tag that surrounds the elementNode argument is removed.

Returns

Nothing.

dom.resetAllElementViews()

Availability

Dreamweaver 8.

Description

This function resets the Element view of all elements in the document to the original view by removing all internally generated CSS.

Arguments

 forceRefresh 

• The forceRefresh argument, which is optional, is a Boolean value that specifies whether to refresh the rendering of the entire document when there is no internal CSS to remove. A value of true causes the refresh. The default value is false.

Returns

Nothing.

Example

The following example resets the Element view of all elements in the document without forcing a refresh of the rendering:

 var currentDOM = dw.getDocumentDOM(); currentDOM.resetAllElementViews(false); 

dom.setElementView()

Availability

Dreamweaver 8.

Description

This function sets the Element view for the currently selected element in the document. If the currently selected element is "normal", the setElementView() function looks for the first ancestor of the currently selected element that is "full" or "hidden".

Arguments

 view 

• The view argument, which is required, is a string that sets the currently selected element to "full" or "hidden". If the currently selected element, is "normal", the setElementView() function looks for the currently selected element's first ancestor that is either "full" or "hidden". For additional information, see "dom.getElementView()" on page 925. Possible values are:

  • "full" Removes the internal CSS that put the element in "full" view, so that the element returns to its original state.

  • "hidden" If the currently selected element is in "hidden" view, Dreamweaver generates the CSS to cause all content to be viewed and then applies the CSS as an internal design time style sheet.

Returns

Nothing.

Example

See "dom.getElementView()" on page 925.

dom.setShowDivBackgrounds()

Availability

Dreamweaver 8.

Description

This function turns the Layout Block Backgrounds visual aid on or off.

Arguments

 show 

• The show argument, which is required, is a Boolean value that specifies whether to turn the Layout Block Backgrounds visual aid on. Setting show to true turns the Layout Block Backgrounds visual aid on.

Returns

Nothing.

Example

See "dom.getShowDivBackgrounds()" on page 926.

dom.setShowDivBoxModel()

Availability

Dreamweaver 8.

Description

This function turns the Layout Block Box Model visual aid on or off.

Arguments

 show 

• The show argument, which is required, is a Boolean value that specifies whether to turn the Layout Block Box Model visual aid on. Setting show to TRue turns the Layout Block Box Model visual aid on.

Returns

Nothing.

Example

See "dom.getShowDivBoxModel()" on page 926.

dom.setShowDivOutlines()

Availability

Dreamweaver 8.

Description

This function turns the Layout Block Outlines visual aid on or off.

Arguments

 show 

• The show argument, which is required, is a Boolean value that specifies whether to turn the Layout Block Outlines visual aid on. Setting show to true turns the Layout Block Outlines visual aid on.

Returns

Nothing.

Example

See "dom.getShowDivOutlines()" on page 927.

dreamweaver.cssRuleTracker.editSelectedRule()

Availability

Dreamweaver MX 2004.

Description

Lets the user edit the currently selected rule in the rule tracker. This function displays the selected rule in the CSS property grid, and if necessary, will show the property grid and its containing floater.

Arguments

None.

Returns

Nothing.

Enabler

See "dreamweaver.cssRuleTracker.canEditSelectedRule()" on page 1078.

dreamweaver.cssRuleTracker.newRule()

Availability

Dreamweaver MX 2004.

Description

Opens the New CSS Style dialog box, so the user can create a new rule.

Arguments

None.

Returns

Nothing.

dreamweaver.cssStylePalette.applySelectedStyle()

Availability

Dreamweaver MX.

Description

Applies the selected style to the current active document or to its attached style sheet, depending on the selection in the Styles panel.

Arguments

 { pane } 

• The pane argument, which is optional, is a string that specifies the pane of the Styles Panel to which this function applies. Possible values are "stylelist", which is the list of styles in "All" mode; "cascade", which is the list of applicable, relevant rules in "Current" mode; "summary", which is the list of properties for the current selection in "Current" mode; and "ruleInspector", which is the editable list or grid of properties in "Current" mode. The default value is "stylelist".

Returns

Nothing.

Enabler

See "dreamweaver.cssStylePalette.canApplySelectedStyle()" on page 1079.

dreamweaver.cssStylePalette.attachStyleSheet()

Availability

Dreamweaver 4.

Description

Displays a dialog box that lets users attach a style sheet to the current active document or to one of its attached style sheets, depending on the selection in the Styles panel.

Arguments

None.

Returns

Nothing.

dreamweaver.cssStylePalette.deleteSelectedStyle()

Availability

Dreamweaver 3.

Description

Deletes the style that is currently selected in the Styles panel from the document.

Arguments

 { pane } 

• The pane argument, which is optional, is a string that specifies the pane of the Styles Panel to which this function applies. Possible values are "stylelist", which is the list of styles in "All" mode; "cascade", which is the list of applicable, relevant rules in "Current" mode; "summary", which is the list of properties for the current selection in "Current" mode; and "ruleInspector", which is the editable list or grid of properties in "Current" mode. The default value is "stylelist".

Returns

Nothing.

Enabler

See "dreamweaver.cssStylePalette.canDeleteSelectedStyle()" on page 1079.

dreamweaver.cssStylePalette.duplicateSelectedStyle()

Availability

Dreamweaver 3.

Description

Duplicates the style that is currently selected in the Styles panel and displays the Duplicate Style dialog box to let the user assign a name or selector to the new style.

Arguments

 { pane } 

• The pane argument, which is optional, is a string that specifies the pane of the Styles Panel to which this function applies. Possible values are "stylelist", which is the list of styles in "All" mode; "cascade", which is the list of applicable, relevant rules in "Current" mode; "summary", which is the list of properties for the current selection in "Current" mode; and "ruleInspector", which is the editable list or grid of properties in "Current" mode. The default value is "stylelist".

Returns

Nothing.

Enabler

See "dreamweaver.cssStylePalette.canDuplicateSelectedStyle()" on page 1080.

dreamweaver.cssStylePalette.editSelectedStyle()

Availability

Dreamweaver 3.

Description

Opens the Style Definition dialog box for the style that is currently selected in the Styles panel.

Arguments

 { pane } 

• The pane argument, which is optional, is a string that specifies the pane of the Styles Panel to which this function applies. Possible values are "stylelist", which is the list of styles in "All" mode; "cascade", which is the list of applicable, relevant rules in "Current" mode; "summary", which is the list of properties for the current selection in "Current" mode; and "ruleInspector", which is the editable list or grid of properties in "Current" mode. The default value is "stylelist".

Returns

Nothing.

Enabler

See "dreamweaver.cssStylePalette.canEditSelectedStyle()" on page 1081.

dreamweaver.cssStylePalette.editSelectedStyleInCodeview()

Availability

Dreamweaver 8.

Description

Ths function switches to Code view and moves the mouse pointer to the code for the style that is currently selected in the Styles panel.

Arguments

 { pane } 

• The pane argument, which is optional, is a string that specifies the pane of the Styles Panel to which this function applies. Possible values are "stylelist", which is the list of styles in "All" mode; "cascade", which is the list of applicable, relevant rules in "Current" mode; "summary", which is the list of properties for the current selection in "Current" mode; and "ruleInspector", which is the editable list or grid of properties in "Current" mode. The default value is "stylelist".

Returns

Nothing.

Enabler

See "dreamweaver.cssStylePalette.canEditSelectedStyleInCodeview()" on page 1081.

dreamweaver.cssStylePalette.editStyleSheet()

Availability

Dreamweaver 3.

Description

Opens the Edit Style Sheet dialog box.

Arguments

None.

Returns

Nothing.

Enabler

See "dreamweaver.cssStylePalette.canEditStyleSheet()" on page 1082.

dreamweaver.cssStylePalette.getDisplayStyles()

Availability

Dreamweaver 8.

Description

This function determines whether CSS styles are being rendered. The default value is TRue.

Arguments

None.

Returns

A Boolean value: true if CSS styles are being rendered; false otherwise.

Example

 var areStylesRendered = dw.cssStylePalette.getDisplayStyles(); 

dreamweaver.cssStylePalette.getMediaType()

Availability

Dreamweaver MX 2004.

Description

Gets target media type for rendering. The default media type is "screen".

Arguments

None.

Returns

A string value that specifies the target media type.

Example

 var mediaType = dw.cssStylePalette.getMediaType(); 

dreamweaver.cssStylePalette.getSelectedStyle()

Availability

Dreamweaver 3; fullSelector available in Dreamweaver MX.

Description

Gets the name of the style that is currently selected in the Styles panel.

Arguments

 fullSelector 

• The fullSelector argument is a Boolean value that indicates whether the full selector or only the class should return. If nothing is specified, only the class name returns. For instance, p.class1 is a selector that means the style is applied to any p tag of class1, but it does not apply, for instance, to a div tag of class1. Without the fullSelector argument, the dreamweaver.cssStylePalette.getSelectedStyle() function returns only the class name, class1, for the selector. The fullSelector argument tells the function to return p.class1 instead of class1.

Returns

When the fullSelector argument is a TRue value, the function returns either the full selector or an empty string when the stylesheet node is selected.

When the fullSelector argument is a false value or it is omitted, a string that represents the class name of the selected style returns. If the selected style does not have a class or a stylesheet node is selected, an empty string returns.

Example

If the style red is selected, a call to the dw.cssStylePalette.getSelectedStyle() function returns "red".

dreamweaver.cssStylePalette.getSelectedTarget() (deprecated)

Availability

Dreamweaver 3; deprecated in Dreamweaver MX because there is no longer an Apply To Menu in the Styles panel.

Description

This function gets the selected element in the Apply To pop-up menu at the top of the Styles panel.

Arguments

None.

Returns

A deprecated function; always returns a null value.

dreamweaver.cssStylePalette.getStyles()

Availability

Dreamweaver 3.

Description

Gets a list of all the class styles in the active document. Without arguments it just returns class selector names. If the bGetIDs argument is true, it returns just ID selector names. In either case, if the bGetFullSelector argument is true, it returns the full selector name.

For example, given an HTML file with the following code:

 <style> .test{ background:none }; p.foo{ background:none }; #bar {background:none }; div#hello p.world {background:none}; 

The calls in the following table return the values in the Result column.

Function call	Result
dw.cssStylePalette.getStyles()	foo,test,world
dw.cssStylePalette.getStyles(true)	bar,hello
dw.cssStylePalette.getStyles(false, true)	p.foo,.test,div#hello p.world
dw.cssStylePalette.getStyles(true, true)	#bar,div#hello p.world

Arguments

 {bGetIDs, bGetFullSelector} 

• The bGetIDs argument is optional. It is a Boolean value that, if true, causes the function to return just ID selector names (the part after the "#"). Defaults to false.

• The bGetFullSelector argument is optional. It is a Boolean value that, if true, returns the complete selector string, instead of just the names. Defaults to false.

Returns

An array of strings that represent the names of all the class styles in the document.

Example

If the Styles panel is set up as shown in the following figure, a call to the dreamweaver.cssStylePalette.getStyles() function returns an array that contains these strings: "BreadcrumbEnd", "change", "doctitle", "heading", and "highlight":

dreamweaver.cssStylePalette.newStyle()

Availability

Dreamweaver 3.

Description

Opens the New Style dialog box.

Arguments

None.

Returns

Nothing.

dreamweaver.cssStylePalette.renameSelectedStyle()

Availability

Dreamweaver 3.

Description

Renames the class name that is used in the currently selected rule in the Styles panel and all instances of the class name in the selected rule.

Arguments

 { pane } 

• The pane argument, which is optional, is a string that specifies the pane of the Styles Panel to which this function applies. Possible values are "stylelist", which is the list of styles in "All" mode; "cascade", which is the list of applicable, relevant rules in "Current" mode; "summary", which is the list of properties for the current selection in "Current" mode; and "ruleInspector", which is the editable list or grid of properties in "Current" mode. The default value is "stylelist".

Returns

Nothing.

Enabler

See "dreamweaver.cssStylePalette.canRenameSelectedStyle()" on page 1082.

dreamweaver.cssStylePalette.setDisplayStyles()

Availability

Dreamweaver 8.

Description

This functon determines whether to render CSS styles and refreshes the rendering of all open documents.

Arguments

 display 

• The display argument is a Boolean value: true to render CSS styles; false otherwise.

Returns

Nothing.

Example

The following example turns off rendering of CSS styles:

 dw.cssStylePalette.setDisplayStyles(false); 

dreamweaver.cssStylePalette.setMediaType()

Availability

Dreamweaver MX 2004.

Description

Sets the target media type for rendering. Refreshes the rendering of all open documents.

Arguments

 mediaType 

• The mediaType argument specifies the new target media type.

Returns

Nothing.

Example

 dw.cssStylePalette.setMediaType("print"); 

dreamweaver.getBlockVisBoxModelColors()

Availability

Dreamweaver 8.

Description

This function gets the colors used to render the box model for a selected block when the Layout Block Box Model visual aid is on.

Arguments

None.

Returns

An array of strings that contains two strings:

• marginColor, which is the hexadecimal value of the RGB color, in the form #RRGGBB paddingColor, which is the hexadecimal value of the RGB color, in the form #RRGGBB

Example

The following example checks the value of the margin and padding color; if either isn't white, it sets them both to white:

 var boxColors = dreamweaver.getBlockVisBoxModelColors(); if ((boxColors[0] != "#FFFFFF") || (boxColors[1] != "#FFFFFF)){      currentDOM.setBlockVisBoxModelColors("#FFFFFF", "#FFFFFF");      } 

dreamweaver.getBlockVisOutlineProperties()

Availability

Dreamweaver 8.

Description

This function gets the outline properties for the block visualization visual aids.

Arguments

 forWhat 

• The forWhat argument, which is required, is a string. Possible values are "divs", "selectedDiv", or "layers". If the forWhat argument is "divs", the function returns the properties used for the visual aid that outlines all layout blocks. If forWhat is "selectedDiv", the function returns the property used for the visual aid that outlines selected layout blocks. The layers value specifies layers.

Returns

An array of strings that contains three strings:

• color, which is the hexadecimal value of the RGB color, in the form #RRGGBB

• width, which indicates the width in pixels

• style, which is "SOLID", "DOTTED", "DASHED", or "OUTSET"

Example

The following example gets the outline properties for "divs" and makes the outline style "SOLID":

 var outlineStyle = dw.getBlockVisOutlineProperties("divs"); if (outlineStyle[2] != "SOLID"){     dw.setBlockVisOutlineProperties("divs", outlineStyle[0], outlineStyle[1], "SOLID");     } 

dreamweaver.getDivBackgroundColors()

Availability

Dreamweaver 8.

Description

This function gets the colors used by the Layout Block Backgrounds visual aid.

Arguments

None.

Returns

An array of strings that contains the 16 colors, with each color represented by the hexadecimal value of the RGB color, in the form #RRGGBB.

Example

The following example gets the background colors used by the Layout Block Backgrounds visual aid:

 var backgroundColors = dreamweaver.getDivBackgroundColors(); 

dreamweaver.setBlockVisOutlineProperties()

Availability

Dreamweaver 8.

Description

This function sets the outline properties for the block visualization visual aids.

Arguments

 forWhat, color, width, {style} 

• The forWhat argument, which is required, is a string that specifies for what the specified color and width are used. Possible values are "divs", "selectedDiv", or "layers". If the value is "layers", the specified color and width are used to outline all layers when the Layout Block Outlines visual aid is on. If the value is "divs", the color and width arguments are used to outline all divs and other layout blocks. If the value is "selectedDiv", the color and width arguments are used to outline any div or layout block that is selected.

• The color argument, which is required, is a string that contains the hexadecimal value that indicates the RGB color in the form #RRGGBB.

• The width argument, which is required, is an integer that indicates the outline width, in pixels.

• The style argument, which is optional, is a string that indicates the style of the outline. Possible values are "SOLID", "DOTTED", "DASHED", and "OUTSET". The "OUTSET" value is applicable to layers only. This argument is ignored when the forWhat argument's value is "selectedDiv".

Returns

Nothing.

Example

See "dreamweaver.getBlockVisOutlineProperties()" on page 942.

dreamweaver.setDivBackgroundColors()

Availability

Dreamweaver 8.

Description

This function sets the colors used by the Layout Block Backgrounds visual aid.

Arguments

 colors 

• The colors argument, which is required, is an array of strings that contains all the colors, represented as hexadecimal values in the form #RRGGBB. The array must contain 16 colors.

Returns

Nothing.

Example

The following example makes sure there are no more than 16 colors specified as div background colors and, if so, sets the colors used as background colors to shades of gray:

 var currentDOM = dw.getDocumentDOM(); var divColors = currentDOM.getDivBackgroundColors("divs"); var shadesOfGray = new Array["#000000", "#111111", "#222222", "#333333", "#444444",  "#555555", "#666666", "#777777", "#888888", "#999999", "#AAAAAA", "#BBBBBB", "#CCCCCC",  "#DDDDDD", "#EEEEEE", "#FFFFFF"] var howManyColors = divColors.length; if howManyColors <= 16{   for (var i = 0; i < howManyColors; i++)   {      currentDOM.setDivBackgroundColors("divs", shadeOfGray[i]);   }