QXML DOM API Reference

QXML elements and CSS Properties

qx-layout

Attributes Java Script Property Name Values Description
layout-nametextName of active layout
layout-idnumberUnique ID of active layout as generated by QuarkXPress
layout-typeprint | digitalLayout type of active layout

qx-layer

Attributes Java Script Property Name Values Description
layer-nametextName of the layer
layer-idnumberUnique ID of layer as generated by QuarkXPress
CSS PROPERTIES:
--qx-visibilityqxVisibilityvisible | hiddenRepresents whether the layer is visible or hidden
--qx-colorqxColorrgb(r,g,b)Represents the layer's color as displayed in the Layers palette
--qx-suppress-outputqxSuppressOutputtrue | falseControls whether the layer is included or excluded in the output
--qx-keep-runaroundqxKeepRunaroundtrue | falseSpecifies whether text on visible layers runs around text on hidden layers
--qx-lockedqxLockedtrue | falseSpecifies whether a layer is locked

qx-spread

Attributes Java Script Property Name Values Description
spread-indexnumberIndex of the spread

qx-page

Attributes Java Script Property Name Values Description
page-indexnumberIndex of the page
page-positionleft | rightSpecifies whether a page should be on the left or right of the spine
applied-master-pagetextIdentifies the master-page that is applied to a page

qx-box

Attributes Java Script Property Name Values Description
box-idnumberUnique ID of the box as generated by QuarkXPress
box-nametextName of the box
box-content-typetext| pictureSpecifies whether the box can hold picture or text content
classtextName of Item Style applied on box
CSS PROPERTIES:
--qx-background-colorqxBackgroundColorSpecifies the background color of the box
--qx-background-shadeqxBackgroundShade0.0 - 1.0 Specifies the shade of a box's background color, specified in the range 0 - 1 where 0=0% and 1 = 100%. Example values: 0 = 0%, 0.25 = 25%, 0.50 = 50% and 1 = 100%.
--qx-background-opacityqxBackgroundOpacity0.0 - 1.0Specifies the opacity of a box's background color , specified in the range 0 - 1 where 0=0% and 1 = 100%. Example values: 0 = 0%, 0.25 = 25%, 0.50 = 50% and 1 = 100%.
--qx-mix-blend-modeqxMixBlendModenormal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft- light | difference | exclusionDescribes how an element's content should blend with the content of the element's direct parent and the element's background
--qx-layer-nameqxLayerNameThe name of the layer on which the box exists
--qx-pageqxPageThe name of the page on which the box exists
--qx-transformqxTransformrotate(angle) | skew(angle) | rotate(angle) skew(angle)This property allows you to rotate and skew the box. Rotate value should be in range -360deg to 360deg Skew value should be in range -75deg to 75deg Example value: rotate(90deg) skew(20deg)
--qx-maintain-aspect-ratioqxMaintainAspectRatiotrue | falseSpecifies whether the resized box should have the same aspect ratio as the original box
--qx-positionqxPositionabsolute (more to be added)Specifies the type of positioning method used for the box
--qx-topqxTopThe distance between the top edge of the box and the top of the page, in points
--qx-leftqxLeftThe distance between the left edge of the box and the left of the page, in points
--qx-bottomqxBottomThe distance between the bottom edge of the box and the bottom of the page, in points
--qx-rightqxRightThe distance between the right edge of the box and the right of the page, in points
--qx-wrap-flowqxWrapFlowauto | bothWrap Flow lets you control the way text runs behind, around, or within items and pictures
--qx-wrap-margin-topqxWrapMarginTopSpecifies the distance between the text and top edge of the box in case of wrap flow where the value is specified in points.
--qx-wrap-margin-leftqxWrapMarginLeftSpecifies the distance between the text and left edge of the box in case of wrap flow where the value is specified in points.
--qx-wrap-margin-bottomqxWrapMarginBottomSpecifies the distance between the text and bottom edge of the box in case of wrap flow where the value is specified in points.
--qx-wrap-margin-rightqxWrapMarginRightSpecifies the distance between the text and right edge of the box in case of wrap flow where the value is specified in points.
--qx-suppress-outputqxSuppressOutputtrue | falseLets you suppress or allow the output of a box
--qx-border-radiusqxBorderRadiusThis property allows you to add rounded borders to elements. The app.getActiveLayoutDOM() method returns value as per measurement units of document.To change value through script, value can be specified in any measurement units.
--qx-corner-shapeqxCornerShaperectangle | bevel | round | scoopThis property allows you to add corner shapes to your box element
--qx-border-widthqxBorderWidthDefines the width of the border, that is, how thick is the border. The app.getActiveLayoutDOM() method returns value as per measurement units of document.To change value through script, value can be specified in any measurement units.
--qx-border-styleqxBorderStyleThis property specifies the style of the box's border. Name of any dashes and stripes can be passed in this property.
--qx-border-colorqxBorderColorThis property gives a border color to the box's border
--qx-border-shadeqxBorderShade0.0 - 1.0 Specifies the shade of the border color, specified in the range 0 - 1 where 0=0% and 1 = 100%. Example values: 0 = 0%, 0.25 = 25%, 0.50 = 50% and 1 = 100%.
--qx-border-opacityqxBorderOpacity0.0 - 1.0Specifies the opacity of the border , specified in the range 0 - 1 where 0=0% and 1 = 100%. Example values: 0 = 0%, 0.25 = 25%, 0.50 = 50% and 1 = 100%.
--qx-border-mix-blend-modeqxBorderMixBlendModenormal | multiply | screen, overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusionDescribes how a border's content should blend with the border's background.
--qx-border-gap-colorqxBorderGapColorSpecifies the name of color for the gap (if any) between the lines that make up the border.
--qx-border-gap-shadeqxBorderGapShade0.0 - 1.0 Specifies the shade of the gap (if any) between the lines that make up the border, specified in the range 0 - 1 where 0=0% and 1 = 100%. Example values: 0 = 0%, 0.25 = 25%, 0.50 = 50% and 1 = 100%.
--qx-border-gap-opacityqxBorderGapOpacity0.0 - 1.0Specifies the opacity of the gap (if any) between the lines that make up the border, specified in the range 0 - 1 where 0=0% and 1 = 100%. Example values: 0 = 0%, 0.25 = 25%, 0.50 = 50% and 1 = 100%.
--qx-border-gap-mix-blend-modeqxBorderGapMixBlendModenormal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusionDescribes how the border gap should blend with the content of the border gap's direct parent and the border gap's background.
--qx-shadow-transformqxShadowTransformrotate(angle) Specifies an angle in degrees for a drop shadow. Rotate value should be in range -360deg to 360deg Example value: rotate(90deg)
--qx-shadow-transformqxShadowTransformskew(angle)Specifies a skew angle for a drop shadow. Skew value should be in range -75deg to 75deg Example value: skew(20deg)
--qx-shadow-transformqxShadowTransformscale(scale)Specifies the size of an item's drop shadow as an integer percentage of the size of the item. Scale is specified in the range 0 - 1 where 0=0% and 1 = 100%. Example values: 0 = 0%, 0.25 = 25%, 0.50 = 50% and 1 = 100%.
--qx-shadow-colorqxShadowColorIdentifies the name of color of a drop shadow
--qx-shadow-shadeqxShadowShade0.0 - 1.0 Specifies the shade of the color applied to a drop shadow, specified in the range 0 - 1 where 0=0% and 1 = 100%. Example values: 0 = 0%, 0.25 = 25%, 0.50 = 50% and 1 = 100%.
--qx-shadow-opacityqxShadowOpacity0.0 - 1.0 Specifies the opacity of a drop shadow, specified in the range 0 - 1 where 0=0% and 1 = 100%. Example values: 0 = 0%, 0.25 = 25%, 0.50 = 50% and 1 = 100%.
--qx-shadow-angle-synchronizedqxShadowAngleSynchronizedSpecifies an angle in degrees for a drop shadow. Should be a floating point value between -180 and 180
--qx-shadow-distanceqxShadowDistanceSpecifies the distance in points from the edge of an item to the edge of the items drop shadow as a floating point value
--qx-shadow-filterqxShadowFilterblur(blur points)Applies a Blur effect to the Shadow. A larger value will create more blur. The app.getActiveLayoutDOM() method returns value as per measurement units of document.To change value through script, value can be specified in any measurement units.
--qx-shadow-inherit-opacityqxShadowInheritOpacitytrue | falseSpecifies whether the drop shadow reflects the opacity or opacities of the item, such as differences in opacity between the box background and frame
--qx-shadow-knock-outqxShadowKnockouttrue | falseSpecifies whether a shadow displays through semi-opaque areas of its item
--qx-shadow-multiplyqxShadowMultiplytrue | falseSpecifies how a drop shadow is combined with its background.When true, the shadow color is combined with the background color or colors using a ?multiply? blending mode, producing a darker result (similar to an overprint).When false, the color of the background is combined with the color of the shadow to create the intermediate shades you see on screen.In general, set to true if the shadow is a lighter color, and set to false if the shadow is black
--qx-shadow-runaroundqxShadowRunaroundtrue | falseSpecifies whether to include a drop shadow with the text runaround specified in the RUNAROUND element
--qx-text-transform:rotate(angle)qxTextTransformSpecifies a rotation angle for text as a floating-point value between -360 degrees and 360 degrees
--qx-text-transform:skew(angle)qxTextTransformSpecifies a skew angle for text as a floating-point value from -75 degrees to 75 degrees
--qx-column-countqxColumnCountSpecifies the index position of a column beginning from the left. For example, COLUMNCOUNT = 1 indicates the first column from the left, and COLUMNCOUNT = 2 indicates the second column from the left
--qx-column-gapqxColumnGapSpecifies the width of the column gap. The app.getActiveLayoutDOM() method returns value as per measurement units of document.To change value through script, value can be specified in any measurement units.
--qx-column-rule-widthqxColumnRuleWidthSpecifies the width of a column rule. The app.getActiveLayoutDOM() method returns value as per measurement units of document.To change value through script, value can be specified in any measurement units.
--qx-column-rule-styleqxColumnRuleStyleSpecifies the Rule style for the Column Rule, eg. Dotted, Solid
--qx-column-rule-colorqxColumnRuleColorIdentifies the name of color of a column rule
--qx-column-rule-shadeqxColumnRuleShade0.0 - 1.0Specifies the shade of the color applied to a column, specified in the range 0 - 1 where 0=0% and 1 = 100%. Example values: 0 = 0%, 0.25 = 25%, 0.50 = 50% and 1 = 100%.
--qx-column-rule-opacityqxColumnRuleOpacity0.0 - 1.0Specifies the opacity of the color applied to a column, specified in the range 0 - 1 where 0=0% and 1 = 100%. Example values: 0 = 0%, 0.25 = 25%, 0.50 = 50% and 1 = 100%.
--qx-text-mix-blend-modeqxTextMixBlendModenormal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusionDescribes how the Text should blend with the Text's background.
--qx-paddingqxPaddingUsed to generate space around an element's content, inside of the box. The app.getActiveLayoutDOM() method returns value as per measurement units of document.To change value through script, value can be specified in any measurement units.
--qx-padding-topqxPaddingTopSpecifies the top offset. The app.getActiveLayoutDOM() method returns value as per measurement units of document.To change value through script, value can be specified in any measurement units.
--qx-padding-leftqxPaddingLeftSpecifies the left offset. The app.getActiveLayoutDOM() method returns value as per measurement units of document.To change value through script, value can be specified in any measurement units.
--qx-padding-bottomqxPaddingBottomSpecifies the bottom offset. The app.getActiveLayoutDOM() method returns value as per measurement units of document.To change value through script, value can be specified in any measurement units.
--qx-padding-rightqxPaddingRightSpecifies the right offset. The app.getActiveLayoutDOM() method returns value as per measurement units of document.To change value through script, value can be specified in any measurement units.
--qx-first-baseline-minimumqxFirstBaselineMinimumSpecifies the minimum distance between the top edge of a text box and the baseline of the first line of text
--qx-first-baseline-offsetqxFirstBaselineOffsetSpecifies the distance between the first text baseline in the text box and the top inside edge of the text box
--qx-align-itemsqxAlignItemsstart|top|center|centered|bottom|end|justify|justifiedAligns text veritically in a text box
--qx-inter-para-max-spaceqxInterParaMaxSpaceSpecifies the distance between the paragraphs when used with Justify Alignment
--qx-run-text-around-all-sidesqxRunTextAroundAllSidestrue | falseThe text runs all around the box
--qx-text-flip-verticalqxTextFlipVerticaltrue | falseThe text is vertically flipped,that is, upside down
--qx-text-flip-horizontalqxTextFlipHorizontaltrue | falseThe text is horizontally flipped, that is, right-to -left
--qx-img-flip-horizontalqxImgFlipHorizontaltrue | falseHorizontally Flip the Image
--qx-img-flip-verticalqxImgFlipVerticaltrue | falseVertically Flip the image
--qx-img-suppress-outputqxImgSuppressOutputtrue | falseLets you suppress or allow the output of an image

qx-story

Attributes Java Script Property Name Values Description
story-idnumberUnique ID of the story as generated by QuarkXPress
CSS PROPERTIES:
--qx-writing-modeqxWritingModehorizontal-tb |?vertical-rl | horizontal | verticalDefines whether lines of text are laid out horizontally or vertically, as well as direction in which box progresses

qx-p

Attributes Java Script Property Name Values Description
classtextName of paragraph style sheet and space separated H&J Style, Bullet and Numbering Style, Para Shading Style, Hanging Character Set. Asset type needs to be prefixed to value of class attribute which is generated using utility methods: app.components.qxml.getClassNameFromAssetName() and app.components.qxml.getAssetNameFromClassName()
CSS PROPERTIES:
--qx-margin-leftqxMarginLeftSpecifies the distance of the paragraph from the Left Margin. Represented in the Palette as 'Left Indent'. The app.getActiveLayoutDOM() method returns value as per measurement units of document.To change value through script, value can be specified in any measurement units.
--qx-text-indentqxTextIndentSpecifies the distance of the first line of a paragraph from the left border. Represented in the Palette as 'First Line Indent'. The app.getActiveLayoutDOM() method returns value as per measurement units of document.To change value through script, value can be specified in any measurement units.
--qx-margin-rightqxMarginRightSpecifies the distance of the paragraph from the Right Margin. Represented in the Palette as 'Right Indent'. The app.getActiveLayoutDOM() method returns value as per measurement units of document.To change value through script, value can be specified in any measurement units.
--qx-line-heightqxLineHeightSpecifies the space between lines of text. Represented in the Palette as 'Leading'. The app.getActiveLayoutDOM() method returns value as per measurement units of document.To change value through script, value can be specified in any measurement units.
--qx-margin-topqxMarginTopSpecifies the distance of the paragraph from the Top Margin. Represented in the Palette as 'Space Before'. The app.getActiveLayoutDOM() method returns value as per measurement units of document.To change value through script, value can be specified in any measurement units.
--qx-margin-bottomqxMarginBottomSpecifies the distance of the paragraph from the Bottom Margin. Represented in the Palette as 'Space After'. The app.getActiveLayoutDOM() method returns value as per measurement units of document.To change value through script, value can be specified in any measurement units.
--qx-text-alignqxTextAlignleft|right|center|justify|forcedText Alignment,i.e., where the text should be placed.
--qx-initial-letter-countqxInitialLetterCountInitial Letter Count allows a user to hang a character or multiple characters for two or more lines below the first line of a paragraph. Represented in the Palette as 'Drop Cap Character Count'.
--qx-initial-letterqxInitialLetterDefines the number of lines the initial letter occupies for a drop cap.
--qx-break-insideqxBreakInsideauto|avoidDefines how page or column breaks should behave inside a generated box. The value 'auto' allows break but does not force any page or column break to be inserted within the principle box. The value 'avoid' avoids any page or column break from being inserted within the principle box.
--qx-orphansqxOrphansSpecifies the number of lines at the paragraph beginning to be kept together when a paragraph is split to next column or page. Represents "Keep Lines Together" at "Start" setting in QuarkXPress.
--qx-widowsqxWidowsSpecifies the number of lines at the paragraph ending to be kept together when a paragraph is split to next column or page. Represents "Keep Lines Together" at "End" setting in QuarkXPress.
--qx-break-afterqxBreakAfterauto|avoidDefines how page or column breaks should behave after a generated box. The value 'auto' allows break but does not force any page or column break to be inserted within the principle box. The value 'avoid' avoids any page or column break from being inserted within the principle box.
--qx-lock-text-to-gridqxLockTextToGridnone|page|textboxSet "lock text to grid" property to none or text box grid or page grid.
--qx-text-grid-alignmentqxTextGridAlignmenttopline|centerline| baseline|bottomlineSpecifies grid type applied on page level or text box level grid.
--qx-bn-min-gapqxBnMinGapMinimum distance from bullet. The app.getActiveLayoutDOM() method returns value as per measurement units of document.To change value through script, value can be specified in any measurement units.

qx-span

Attributes Java Script Property Name Values Description
classtextSpecify Character Style Sheet and Text Shading Style separated with space. Asset type needs to be prefixed with value of class attribute which is generated using utility methods: app.components.qxml.getClassNameFromAssetName() and app.components.qxml.getAssetNameFromClassName()
CSS PROPERTIES:
--qx-font-sizeqxFontSizeThe font-size attribute specifies the size of the text in points
--qx-colorqxColorThe color attribute specifies the name of color of the text
--qx-baseline-shiftqxBaselineShiftShifts the text up or down without affecting paragraph line spacing. A positive value raises the text, and a negative value lowers it. Value is specified in points relative to font size.
--qx-font-weightqxFontWeightnormal | boldThe font-weight property is used to make text bold
--qx-font-styleqxFontStylenormal | italicThe font-style property is used to make text italic
--qx-font-familyqxFontFamilySpecifies the Font Family Name for the text
--qx-shadeqxShade0.0 - 1.0Specifies Shade of text color, specified in the range 0 - 1 where 0=0% and 1 = 100%. Example values: 0 = 0%, 0.25 = 25%, 0.50 = 50% and 1 = 100%.
--qx-opacityqxOpacity0.0 - 1.0 Specifies Opacity of text color, specified in the range 0 - 1 where 0=0% and 1 = 100%. Example values: 0 = 0%, 0.25 = 25%, 0.50 = 50% and 1 = 100%.
--qx-letter-spacingqxLetterSpacingSpecifies track amount in points
--qx-text-shadowqxTextShadowtrue | falseApplies shadow on text
--qx-stroke-colorqxStrokeColorSpecifies the name of color of Text
--qx-stroke-widthqxStrokeWidthSpecifies the Text Stroke Width in points
--qx-stroke-shadeqxStrokeShade0.0 - 1.0Specifies the Text Stroke Shade, specified in the range 0 - 1 where 0=0% and 1 = 100%. Example values: 0 = 0%, 0.25 = 25%, 0.50 = 50% and 1 = 100%.
--qx-stroke-linejoinqxStrokeLinejoinmiter | round |bevelSpecifies the Text Stroke Line Join
--qx-stroke-miterlimitqxStrokeMiterlimitSpecifies the Text Stroke Miter Limit in points
--qx-languageqxLanguageSpecifies the Language of span
--qx-text-capsqxTextCapsall-caps|small-capsAll-caps turns all the letters to capital letters. Small-caps turns all lowercase letters to uppercase with smaller font size. These options reflect the All-caps and Small-caps text styles in QuarkXPress.
--qx-text-decoration-lineqxTextDecorationLineword-underline|underline|double-line-through|line-throughSets the text styles supported in QuarkXPress.
--qx-text-positionqxTextPositionsuper|subSpecifies whether to position the text in a subscript or superscript format
--qx-text-superiorqxTextSuperiortrue|falseSuperior of text
--qx-text-outlineqxTextOutlinetrue|falseProvides outline to text

qx-img

Attributes Java Script Property Name Values Description
srctextSource of Image, i.e, the path from where the image is to be taken
src#page=textPDF Page to import
src#page&boundingbox=mediabox | cropbox | bleedbox | trimboxPDF Page bounding box
CSS PROPERTIES:
--qx-offset-acrossqxOffsetAcrossSpecifies by how much distance should the image be displaced from the left image border. The app.getActiveLayoutDOM() method returns value as per measurement units of document.To change value through script, value can be specified in any measurement units.
--qx-offset-downqxOffsetDownSpecifies by how much distance should the image be displaced from the top image border. The app.getActiveLayoutDOM() method returns value as per measurement units of document.To change value through script, value can be specified in any measurement units.
--qx-transform:scaleX(scalex)qxTransform0.0 - 1.0 Scale across image, specified in the range 0 - 1 where 0=0% and 1 = 100%. Example values: 0 = 0%, 0.25 = 25%, 0.50 = 50% and 1 = 100%.
--qx-transform:scaleY(scaley)qxTransform0.0 - 1.0 Scale down image, specified in the range 0 - 1 where 0=0% and 1 = 100%. Example values: 0 = 0%, 0.25 = 25%, 0.50 = 50% and 1 = 100%.
--qx-transform:rotate(angle)qxTransformSpecifies a rotation angle for an image as a floating-point value between -360 degrees and 360 degrees
--qx-transform:skew(angle)qxTransformSpecifies a skew angle for an image as a floating-point value between -360 degrees and 360 degrees
--qx-mask-channelqxMaskChannelSpecifies the mask channel of an image
--qx-colorqxColorSpecifies the Color of a Monochrome image
--qx-shadeqxShade0.0 - 1.0 Specifies the shade of the image, specified in the range 0 - 1 where 0=0% and 1 = 100%. Example values: 0 = 0%, 0.25 = 25%, 0.50 = 50% and 1 = 100%.
--qx-opacityqxOpacity0.0 - 1.0 Specifies the opacity of the image, specified in the range 0 - 1 where 0=0% and 1 = 100%. Example values: 0 = 0%, 0.25 = 25%, 0.50 = 50% and 1 = 100%.
--qx-mix-blend-modeqxMixBlendModeDescribes how an image should blend with the image's background
--qx-background-colorqxBackgroundColorSpecifies the color of an image's background
--qx-background-shadeqxBackgroundShade0.0 - 1.0 Specifies the shade of an image's background, specified in the range 0 - 1 where 0=0% and 1 = 100%. Example values: 0 = 0%, 0.25 = 25%, 0.50 = 50% and 1 = 100%.
--qx-background-opacityqxBackgroundOpacity0.0 - 1.0 Specifies the opacity of an image's background, specified in the range 0 - 1 where 0=0% and 1 = 100%. Example values: 0 = 0%, 0.25 = 25%, 0.50 = 50% and 1 = 100%.

qx-a

Attributes Java Script Property Name Values Description
hrefURLTarget of Hyperlink. Clicking on the Hyperlink will take the user either to a web location, a particular anchored position in the same layout or to a particular page
titletextTitle of Hyperlink. The title will display in the Hyperlinks Palette

qx-bookmark

Attributes Java Script Property Name Values Description
idIdId of Anchor

Working with Hyperlinks

//Get the layout of active DOM
var layout = app.activeLayoutDOM();

//Get all the 'qx-box' elements in layout
var boxes = layout.getElementsByTagName('qx-box');

//GO TO ANCHOR

//Create anchor element
var new_anchor_url=document.createElement('qx-a');
new_anchor_url.setAttribute('href','#anchor');

//Get all the span elements in the box
var anchor_span=boxes[0].getElementsByTagName('qx-span');

//Append anchor element in paragraph
anchor_span[0].parentNode.appendChild(new_anchor_url);

//Create span element
var new_anchor_span=document.createElement('qx-span');

//Get all the span elements in the box
var anchor_span=boxes[0].getElementsByTagName('qx-span');

//Get all the anchor elements in the box
var an=boxes[0].getElementsByTagName('qx-a');

//Append the span inside the anchor
an[0].appendChild(new_anchor_span);

//Set the inner HTML
anchor_span[1].innerHTML='I will go to box 2';

//Get all the span elements in the box
var anchor_span2=boxes[1].getElementsByTagName('qx-span');

//Set the inner HTML
anchor_span2[0].innerHTML='I am Anchor for Box 1';

//Create bookmark element
var new_bookmark=document.createElement('qx-bookmark');
new_bookmark.setAttribute('id','anchor');
var list=anchor_span2[0].parentNode;
list.insertBefore(new_bookmark,list.childNodes[0]);

//GO TO URL
//Get all the paragraph elements in the box
var paras = boxes[2].getElementsByTagName('qx-p');

//Create anchor element
var url_anchor=document.createElement('qx-a');

//Create span element
var new_span=document.createElement('qx-span');
url_anchor.setAttribute('href','www.google.com');
url_anchor.setAttribute('title','google');

//Set the inner text
new_span.innerText='CLICK HERE FOR www.google.com';

//Append span inside anchor
url_anchor.appendChild(new_span);

//Get all the span elements in the box
var spans=boxes[2].getElementsByTagName('qx-span');

//Append anchor inside paragraph
spans[0].parentNode.appendChild(url_anchor);

//GO TO PAGE
//Get all the span elements in the box
var spans=boxes[3].getElementsByTagName('qx-span');

//Create anchor element
var page_anchor=document.createElement('qx-a');
page_anchor.setAttribute('href','#page=2');

//Append anchor inside paragraph
spans[0].parentNode.appendChild(page_anchor);

//Create span element
var new_page_span=document.createElement('qx-span');

//Set the inner Text
new_page_span.innerText='CLICK HERE FOR PAGE 2';

//Append span inside anchor
page_anchor.appendChild(new_page_span);

//Get all the span elements in the box
var spans=boxes[3].getElementsByTagName('qx-span');

//Append Append anchor inside paragraph
spans[0].parentNode.appendChild(page_anchor);

Working with Layers

//Create Layout
var layout=app.activeLayoutDOM();

//Get All Layers
var layer=layout.getElementsByTagName('qx-layer');

//Create New Layer
var newlayer=document.createElement('qx-layer');

//Apply Layer Name
var layerName='PrintLayer';
newlayer.setAttribute('layer-name',layerName);

//Apply Layer Visibility
var layerVisibility='hidden';
newlayer.style.qxVisibility=layerVisibility;

//Apply Layer Color
var layerColor='rgb(100,100,100)';
newlayer.style.qxColor=layerColor;

//Apply Suppress Output
var suppressOutput='true';
newlayer.style.qxSuppressOutput=suppressOutput;

//Apply Layer Keep Runaround
var keepRunaround='true';
newlayer.style.qxKeepRunaround=keepRunaround;

//Apply Layer Locked
var layerLocked='true';
newlayer.style.qxLocked=layerLocked;

//Append New Layer to Parent Node
layer[0].parentNode.appendChild(newlayer);

Working with Picture Boxes

//Get the layout of active DOM
var layout = app.activeLayoutDOM();

//Get all the 'qx-box' elements in layout
var boxes = layout.getElementsByTagName('qx-box');

//Get all the 'qx-img' elements in the box
var images = boxes[0].getElementsByTagName('qx-img');

//Get all the 'qx-img' elements in the box
var pdf_image=boxes[1].getElementsByTagName('qx-img');

//Apply Img Flip Vertical
var newImgFlipVertical='true';
boxes[0].style.qxImgFlipVertical=newImgFlipVertical;

//Apply Img Suppress Output
var newImgSuppressOutput='false';
boxes[0].style.qxImgSuppressOutput=newImgSuppressOutput;

//Apply Img Flip Horizontal
var newImgFlipHorizontal='true';
boxes[0].style.qxImgFlipHorizontal=newImgFlipHorizontal;

//Apply Offset Across
var newOffsetAcross='10mm';
images[0].style.qxOffsetAcross=newOffsetAcross;

//Apply Offset Down
var newOffsetDown='10mm';
images[0].style.qxOffsetDown=newOffsetDown;

//Apply Transform
var newTransform='rotate(30deg)';
images[0].style.qxTransform=newTransform;

//Apply Color
var newColor='cyan';
images[0].style.qxColor=newColor;

//Apply Shade
var newShade='0.5';
images[0].style.qxShade=newShade;

//Apply Opacity
var newOpacity='0.9';
images[0].style.qxOpacity=newOpacity;

//Apply src
var src='file:///C:/SERVER GUIDE.pdf#page=1&boundingbox=trimbox';
pdf_image[0].setAttribute('src',src);

//Apply Mix Blend Mode
var newMixBlendMode='darken';
images[0].style.qxMixBlendMode=newMixBlendMode;

//Create Box
var layout=app.activeLayoutDOM();
var newBox = document.createElement("qx-box");   
newBox.setAttribute("box-content-type", "text"); 
newBox.style.qxLeft = "0.5in";       
newBox.style.qxRight = "4in";       
newBox.style.qxTop = "6in";       
newBox.style.qxBottom = "8in";       
newBox.style.qxPage = 1;
var pages=layout.getElementsByTagName('qx-page')[0];
pages.parentNode.appendChild(newBox);

Working with Spans

//Get the layout of active DOM
var layout=app.activeLayoutDOM();

//Get all the 'qx-box' elements in layout
var boxes = layout.getElementsByTagName('qx-box');

//Get all the 'qx-story' elements in the box
var story=boxes[0].getElementsByTagName('qx-story');

//Get all the 'qx-span' elements in the box
var span=boxes[0].getElementsByTagName('qx-span');

//Apply Class to Span
var existingspanstylename = "New Style Sheet";
var newspanstylename = "cyan";

var myspans = layout.getElementsByClassName(app.components.qxml.getClassNameFromAssetName(existingspanstylename, app.constants.assetTypes.kAssetCharStyle));

var existingStyle = myspans[0].className;

myspans[0].classList.replace(app.components.qxml.getClassNameFromAssetName(existingspanstylename, app.constants.assetTypes.kAssetCharStyle),
app.components.qxml.getClassNameFromAssetName(newspanstylename, app.constants.assetTypes.kAssetCharStyle));

//Apply Font Size to Span
var fontSize='48';
span[0].style.qxFontSize=fontSize;

//Apply Color to Span
var fontColor='red';
span[0].style.qxColor=fontColor;

//Apply Baseline Shift to Span
var baselineShift='1pt';
span[0].style.qxBaselineShift=baselineShift;

//Apply Font Weight to Span
var fontWeight='bold';
span[0].style.qxFontWeight=fontWeight;

//Apply Font Style to Span
var fontStyle='italic';
span[0].style.qxFontStyle=fontStyle;

//Apply Font Family
var fontFamily='Arial';
span[0].style.qxFontFamily=fontFamily;

//Apply Shade
var shade='0.5';
span[0].style.qxShade=shade;

//Apply Opacity
var opacity='0.5';
span[0].style.qxOpacity=opacity;

//Apply Letter Spacing
var letterSpacing='100';
span[0].style.qxLetterSpacing=letterSpacing;

//Apply Text Shadow
var textShadow='true'
span[0].style.qxTextShadow=textShadow;

//Apply Stroke Color
var strokeColor='yellow'
span[0].style.qxStrokeColor=strokeColor;

//Apply Stroke Width
var strokeWidth='4pt'
span[0].style.qxStrokeWidth=strokeWidth;

//Apply Stroke Shade
var strokeShade='0.5';
span[0].style.qxStrokeShade=strokeShade;

//Apply Stroke Linejoin
var strokeLineJoin='miter';
span[0].style.qxStrokeLinejoin=strokeLineJoin;

//Apply Stroke Miterlimit
var strokeMiterLimit='5';
span[0].style.qxStrokeMiterlimit=strokeMiterLimit;

//Apply Language
var language='zh-Hans';
span[0].style.qxLanguage=language;

//Apply Text Caps
var newTextCaps='all-caps';
span[0].style.qxTextCaps=newTextCaps;

//Apply Text Decoration Line
var newTextDecorationLine='line-through';
span[0].style.qxTextDecorationLine=newTextDecorationLine;

//Apply Text Position
var newTextPosition='super';
span[0].style.qxTextPosition=newTextPosition;

//Apply Text Superior
var newTextSuperior='true';
span[0].style.qxTextSuperior=newTextSuperior;

//Apply Text Outline
var newTextOutline='true';
span[0].style.qxTextOutline=newTextOutline;

//Create a new span node
var newSpan=document.createElement('qx-span');

//Set the inner text of newSpan
newSpan.innerText='This is Span 2';

//Append the newSpan inside the paragraph node
span[0].parentNode.appendChild(newSpan);

Working with Stories and Paragraphs

//Get the layout of active DOM
var layout=app.activeLayoutDOM();

//Get all the 'qx-box' elements in layout
var boxes = layout.getElementsByTagName('qx-box');

//Get all the 'qx-story' elements in the box
var story=boxes[0].getElementsByTagName('qx-story')[0];

//Get all the 'qx-p' elements in the box
var paragraph=boxes[0].getElementsByTagName('qx-p')[0];

//Apply Writing Mode
var writingMode='horizontal';
story.style.qxWritingMode=writingMode;

//Apply Margin Left
var marginLeft='0.111in';
paragraph.style.qxMarginLeft=marginLeft;

//Apply Text Indent
var textIndent='0.208in';
paragraph.style.qxTextIndent=textIndent;

//Apply Margin Right
var marginRight='0.222in';
paragraph.style.qxMarginRight=marginRight;

//Apply Line Height
var lineHeight='30pt';
paragraph.style.qxLineHeight=lineHeight;

//Apply Margin Top
var marginTop='0.069in';
paragraph.style.qxMarginTop=marginTop;

//Apply Margin Bottom
var marginBottom='0.042in';
paragraph.style.qxMarginBottom=marginBottom;

//Apply Text Align
var textAlign='right';
paragraph.style.qxTextAlign=textAlign;

//Apply Initial Letter Count
var initialLetterCount='2';
paragraph.style.qxInitialLetterCount=initialLetterCount;

//Apply Initial Letter
var initialLetter='4';
paragraph.style.qxInitialLetter=initialLetter;

//Apply Break Inside
var breakInside='auto';
paragraph.style.qxBreakInside=breakInside;

//Apply Orphans
var orphans='2';
paragraph.style.qxOrphans=orphans;

//Apply Widows
var widows='3';
paragraph.style.qxWidows=widows;

//Apply Break After
var breakAfter='auto';
paragraph.style.qxBreakAfter=breakAfter;

//Apply Lock Text To Grid
var lockTextToGrid='textbox';
paragraph.style.qxTextLockToGrid=lockTextToGrid;

//Apply Text Grid Alignment
var textGridAlignment='topline';
paragraph.style.qxTextGridAlignment=textGridAlignment;

//Apply Bn Min Gap
var newBnMinGap='0.2in';
paragraph.style.qxBnMinGap=newBnMinGap;

//Create a new paragraph node
var newParagraph=document.createElement('qx-p');

//Apply Para Class
var existingparastylename = "New Style Sheet";
var newparastylename = "New Style Sheet 2";

var myparas = layout.getElementsByClassName(app.components.qxml.getClassNameFromAssetName(existingparastylename, app.constants.assetTypes.kAssetParaStyle));

var existingStyle = myparas[0].className;

myparas[0].classList.replace(app.components.qxml.getClassNameFromAssetName(existingparastylename, app.constants.assetTypes.kAssetParaStyle),
app.components.qxml.getClassNameFromAssetName(newparastylename, app.constants.assetTypes.kAssetParaStyle));

//Append newParagraph in Story
paragraph.parentNode.appendChild(newParagraph);

Working with Text Boxes

//Get layout of Active DOM
var layout = app.activeLayoutDOM();

//Get all the 'qx-box' elements
var boxes = layout.getElementsByTagName('qx-box');

//Apply Wrap Flow
var newWrapFlow='both';
boxes[0].style.qxWrapFlow=newWrapFlow;

//Apply Text Blend Mode
var newTextMixBlendMode='darken';
boxes[0].style.qxTextMixBlendMode=newTextMixBlendMode;

//Apply Background Color
var newColor = 'magenta';
boxes[0].style.qxBackgroundColor = newColor;

//Apply Background Shade
var newShade=0.5;
boxes[0].style.qxBackgroundShade=newShade;

//Apply Background Opacity
var newOpacity=0.5;
boxes[0].style.qxBackgroundOpacity=newOpacity;

//Apply Column Count
var newColCount = 2;
boxes[0].style.qxColumnCount = newColCount;

//Apply Column Gap
var newColumnGap='6mm';
boxes[0].style.qxColumnGap=newColumnGap;

//Apply Item Layer Name
var newLayerName='default';
boxes[0].style.qxLayerName=newLayerName;

//Apply Item Page
var newPage='1';
boxes[0].style.qxPage=newPage;

//Apply Transform
var newTransform='skew(40deg)';
boxes[0].style.qxTransform=newTransform;

//Apply Top
var newTop='3in';
boxes[0].style.qxTop=newTop;

//Apply Bottom
var newBottom='8in';
boxes[0].style.qxBottom=newBottom;

//Apply Left
var newLeft='3in';
boxes[0].style.qxLeft=newLeft;

//Apply Right
var newRight='7in';
boxes[0].style.qxRight=newRight;

//Apply Suppress Output
var newSuppressOutput='true';
boxes[0].style.qxSuppressOutput=newSuppressOutput;

//Apply Corner Shape
var newCornerShape='round';
boxes[0].style.qxCornerShape=newCornerShape;

//Apply Border Width
var newBorderWidth='5mm';
boxes[0].style.qxBorderWidth=newBorderWidth;

//Apply Border Radius
var newBorderRadius='0.512in';
boxes[0].style.qxBorderRadius=newBorderRadius;

//Apply Border Style
var newBorderStyle='dotted';
boxes[0].style.qxBorderStyle=newBorderStyle;

//Apply Border Color
var newBorderColor='red';
boxes[0].style.qxBorderColor=newBorderColor;

//Apply Border Shade
var newBorderShade=0.2;
boxes[0].style.qxBorderShade=newBorderShade;

//Apply Border Opacity
var newBorderOpacity=0.5;
boxes[0].style.qxBorderOpacity=newBorderOpacity;

//Apply Border Mix Blend Mode
var newBorderMixBlendMode='darken';
boxes[0].style.qxBorderMixBlendMode=newBorderMixBlendMode;

//Apply Border Gap Color
var newBorderGapColor='yellow';
boxes[0].style.qxBorderGapColor=newBorderGapColor;

//Apply Border Gap Shade
var newBorderGapShade=0.5;
boxes[0].style.qxBorderGapShade=newBorderGapShade;

//Apply Border Gap Opacity
var newBorderGapOpacity=0.5;
boxes[0].style.qxBorderGapOpacity=newBorderGapOpacity;

//Apply Border Gap Mix Blend Mode
var newBorderGapMixBlendMode='darken';
boxes[0].style.qxBorderGapMixBlendMode=newBorderGapMixBlendMode;

//Apply First Baseline Minimum
var newFirstBaselineMinimum='ascent';
boxes[0].style.qxFirstBaselineMinimum=newFirstBaselineMinimum;

//Apply Text Transform
var newTextTransform='rotate(40deg)';
boxes[0].style.qxTextTransform=newTextTransform;

//Apply Align Items
var newAlignItems='justify';
boxes[0].style.qxAlignItems=newAlignItems;

//Apply Inter Para Max Space
var newInterParaMaxSpace='0.25in';
boxes[0].style.qxInterParaMaxSpace=newInterParaMaxSpace;

//Apply Position
var newPosition='absolute';
boxes[0].style.qxPosition=newPosition;

//Apply First Baseline Offset
var newFirstBaselineOffset='0.5in';
boxes[0].style.qxFirstBaselineOffset=newFirstBaselineOffset;

//Apply Text Flip Horizontal
var newTextFlipHorizontal='true';
boxes[0].style.qxTextFlipHorizontal=newTextFlipHorizontal;

//Apply Text Flip Vertical
var newTextFlipVertical='true';
boxes[0].style.qxTextFlipVertical=newTextFlipVertical;

//Apply Maintain Aspect Ratio
var newAspectRatio='true';
boxes[0].style.qxMaintainAspectRatio=newAspectRatio;

//Apply Mix Blend Mode
var newMixBlendMode='darken';
boxes[0].style.qxMixBlendMode=newMixBlendMode;

//Apply Shadow Color
var newShadowColor='cyan';
boxes[0].style.qxShadowColor=newShadowColor;

//Apply Shadow Shade
var newShadowShade='0.75';
boxes[0].style.qxShadowShade=newShadowShade;

//Apply Shadow Opacity
var newShadowOpacity='0.75';
boxes[0].style.qxShadowOpacity=newShadowOpacity;

//Apply Shadow Distance
var newShadowDistance='0.9in';
boxes[0].style.qxShadowDistance=newShadowDistance;

//Apply Shadow Angle Synchronized
var newShadowAngleSynchronized='true';
boxes[0].style.qxShadowAngleSynchronized=newShadowAngleSynchronized;

//Apply Shadow Multiply
var newShadowMultiply='false';
boxes[0].style.qxShadowMultiply=newShadowMultiply;

//Apply Shadow Runaround
var newShadowRunaround='true';
boxes[0].style.qxShadowRunaround=newShadowRunaround;

//Apply Shadow Inherit Opacity
var newShadowInheritOpacity='true';
boxes[0].style.qxShadowInheritOpacity=newShadowInheritOpacity;

//Apply Shadow Transform
var newShadowTransform='skew(20deg) scale(1)';
boxes[0].style.qxShadowTransform=newShadowTransform;

//Apply Shadow Knockout
var newShadowKnockOut='true';
boxes[0].style.qxShadowKnockOut=newShadowKnockOut;

//Apply Shadow Filter
var newShadowFilter='blur(2mm)';
boxes[0].style.qxShadowFilter=newShadowFilter;

//Apply Run Text Around All Sides
var newRunTextAroundAllSides='true';
boxes[0].style.qxRunTextAroundAllSides=newRunTextAroundAllSides;

//Apply Text Flip Horizontal
var newTextFlipHorizontal='true';
boxes[0].style.qxTextFlipHorizontal=newTextFlipHorizontal;

//Apply Padding Top
var newPaddingTop='20pt';
boxes[1].style.qxPaddingTop=newPaddingTop;

//Apply Padding Left
var newPaddingLeft='50pt';
boxes[1].style.qxPaddingLeft=newPaddingLeft;

//Apply Padding Bottom
var newPaddingBottom='50pt';
boxes[1].style.qxPaddingBottom=newPaddingBottom;

//Apply Padding Right
var newPaddingRight='50pt';
boxes[1].style.qxPaddingRight=newPaddingRight;