Introduction

The URL formats for images are:

  • Images from the Media Manager: wix:image://v1/<uri>/<filename>#originWidth=<width>&originHeight=<height>[&watermark=<watermark_manifest_string>]
  • Images from the web: http(s)://<image url>
Did this help?

Image CSS Classes

Note: This feature is only available to Wix Studio users.

You can use the classes listed below to style your Image elements with CSS.

For more information on styling your elements with CSS, see Styling Elements with CSS and the MDN CSS reference docs.

Important: Element structure and undocumented class names may change without advance warning. To avoid unintended style changes to your site, select elements with the documented class names only.

.image

Targets image elements. For example:

Copy
.image { width: 200px; height: 200px; border-radius: 50%; filter: drop-shadow(16px 16px 10px gray); cursor: grab; }
Did this help?

alt


altstring

Sets or gets an image's alt text.

An image's alternative text is typically a relatively short phrase that describes what the image depicts.

The alternative text is used:

  • If the browser cannot display the image.
  • If the user is utilizing a screen reader.
  • By search engines to understand what images are on your site.
JavaScript
let altText = $w("#myImage").alt; // "Alt text"
Did this help?

clickAction


clickActionstring

Sets or gets the action that occurs when an image is clicked.

Setting the clickAction property sets what happens when an image is clicked.

The value can be set to:

  • "none": Nothing happens.
  • "expand": The image opens in a popup window.
  • "link": The image's link opens.
  • "magnified": The cursor becomes a magnifying glass when a visitor hovers over the image.

Getting the clickAction property returns what happens when an image is clicked.

JavaScript
let action = $w("#myImage").clickAction; // "magnified"
Did this help?

fitMode


fitModestring

Sets or gets how an image is placed inside an image element.

Setting the fitMode property sets what happens when an image element contains an image with dimensions that do not match the dimensions of the element as set in the Editor.

The value can be set to one of "fill", "fit", or "fixedWidth".

Important: The fitMode property doesn't affect images from the web. Learn more about different options for your image's src.

The descriptions below contain sample scenarios that place the following images into an image element, where the size of the image element is 100x100.

fitMode example images

  • "fill": Fills the entire image element. The image is resized (meaning enlarged or reduced), maintaining its original aspect ratio, so that there is no empty area in the image element. When an image is resized, the center of the original image is shown in the image element and the part of the original image that does not fit into the image element is not shown.

    fitMode fill example images

  • "fit": Fits the entire image in the image element. If the image is reduced, the image is centered in the image element and any empty space is filled in with the image element's border color and opacity.

    fitMode fit example images

  • "fixedWidth": The image element's width remains fixed and the image is enlarged or reduced, maintaining its original aspect ratio, so that it fits the image element's width. The image element's height is adjusted accordingly.

    fitMode fixed width example images

Getting the fitMode property returns the current fit mode.

Tip: To learn more, see this fitMode example.

JavaScript
let mode = $w("#myImage").fitMode; // "fixedWidth"
Did this help?

src


srcstring

Sets or gets the file location of the image.

Setting the src property changes the displayed image to the image found at the new src value.

Getting the src property returns the location of the current image file.

The image file can either be an image file from the Media Manager or an external file from any web location.

The URL formats supported are:

  • Images from the Media Manager: wix:image://v1//#originWidth=&originHeight=[&watermark=]
  • Images from the web: http(s)://

    Note: Images from the web will not be transformed. This means the following features are not available: Align, crop, focal point, fitMode, resize, and resolution.

JavaScript
let imageSource = $w("#myImage").src; // "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg#originWidth=1970&originHeight=112
Did this help?

tooltip


tooltipstring

Sets or gets an image's tooltip.

An image's tooltip text is displayed when a user hovers over the image or when the image opens in a popup.

JavaScript
let toolTipText = $w("#myImage").tooltip; // "Tooltip text"
Did this help?

customClassList


customClassListCustomClassListRead-only

A property that represents an element's custom CSS classes.

This property is only available to Wix Studio users.

You can use this property to manipulate the custom CSS classes of an element. For example, you can add a custom class to an element or replace an existing class with a new custom class.

Custom classes are those that you create on your site, not the predefined global classes that are provided for each element.

Note: For more information, see Styling Elements with CSS and the MDN CSS reference docs.

Gets a list of the classes of an element
JavaScript
$w("#myElement").customClassList.values(); // ["className1", "className2"]
Did this help?

deleted


deletedbooleanRead-only

Indicates if an element was temporarily deleted from the DOM. Use the restore function to restore the deleted element.

If deleted is true, the element is not in the current DOM.

If deleted is false the element is in the current DOM.

Notes:

  • An element whose deleted status is true can be edited.
  • In Wix Studio, an element whose deleted status is false will not be displayed if the element has been set to Hide.
JavaScript
const isDeleted = $w("#myElement").deleted; // true
Did this help?

global


globalbooleanRead-only

Indicates if an element appears on all pages or only on the current page.

If global is true, the element appears on all pages.

If global is false, the element only appears on the current page.

Get whether an element is displayed on all pages
JavaScript
let isGlobal = $w("#myElement").global; // false
Did this help?

id


idstringRead-only

Gets the element's ID.

The ID is the element's unique identifier. It is used when selecting elements using the $w() function.

An element's id is set in the Editor using the Properties panel.

Get the ID
JavaScript
let myId = $w("#myElement").id; // "myElement"
Did this help?

parent


parentNodeRead-only

Gets the element's parent element.

Some elements can contain other elements. This occurs when you drag an element onto a container element. The container is the parent of all the elements it contains.

Page, Header, and Footer are top-level elements and have no parent.

Get the parent element and the parent's ID
JavaScript
let parentElement = $w("#myElement").parent; let parentId = parentElement.id; // "page1"
Did this help?

rendered


renderedbooleanRead-only

Indicates if an element is currently in the DOM structure.

If rendered is true, the element is in the current DOM structure and can be used.

If rendered is false the element is not in the current DOM structure.

An element might not be in the DOM if it is in a slide or a state which is not currently showing.

Get an element's rendered status
JavaScript
let isRendered = $w("#myElement").rendered; // true
Did this help?

type


typestringRead-only

Gets the element's type.

Possible values include:

  • $w.TextInput
  • $w.TextBox
  • $w.RichTextBox
  • $w.RadioButtonGroup
  • $w.CheckboxGroup
  • $w.Dropdown
  • $w.SelectionTags
  • $w.Slider
  • $w.DatePicker
  • $w.UploadButton
  • $w.RatingsInput
  • $w.AddressInput
  • $w.Switch
  • $w.SignatureInput
  • $w.Captcha
Get the element's type
JavaScript
let myType = $w("#myElement").type; // "$w.Type"
Did this help?

collapsed


collapsedbooleanRead-only

Indicates if the element is collapsed or expanded.

If collapsed is true, the element is not displayed on the page under any circumstances. However, the collapsed element is still in the site's DOM. Unlike a hidden element, a collapsed element doesn't take up any space on the page. When collapsed, elements positioned within 70 pixels below the collapsed element and each other move up to take the collapsed element's place where possible. The elements that move up maintain their positions relative to one another.

If collapsed is false, the element may be displayed on the page. Elements that moved up to take the collapsed element's place on the page are moved back down.

However, an expanded element (an element whose collapsed property is false) is still not displayed if:

  • It is hidden.
  • Its parent element is hidden or collapsed.
  • It is a slide in a Slideshow which is currently not being displayed.
  • In Wix Studio, it has been set to Hide in the Layers panel in that breakpoint.

Even if the element is not displayed due to the conditions mentioned above, if its collapsed property is false, it's displayed when the conditions no longer apply.

To set the collapsed property on an element, use the element's collapse() and expand() functions.

If you select Collapsed on load in the element's Properties panel in the Editor, the collapsed property is set to true when the page loads.

JavaScript
let isCollapsed = $w("#myElement").collapsed; // false
Did this help?

hidden


hiddenbooleanRead-only

Indicates if the element is visible or hidden.

If hidden is true, the element is not displayed on the page under any circumstances. However, the hidden element is still in the site's DOM. Unlike a collapsed element, a hidden element continues to take up the same space on the page as it did when it was visible.

If hidden is false, the element may be displayed on the page.

However, an element whose hidden property is false is still not displayed if:

  • It is collapsed.
  • Its parent element is hidden or collapsed.
  • It is a slide in a Slideshow which is currently not being displayed.
  • In Wix Studio, it has been set to Hide for the current breakpoint.

Even if the element is not displayed due to the conditions mentioned above, if its hidden property is set to false, it's displayed when the conditions no longer apply.

To determine if the element is actually visible, use the isVisible property.

To set the hidden property on an element, use the element's hide() or show() functions.

If you select Hidden in the Properties and Events panel in the Editor, the hidden property is set to true when the page loads.

Note: An element's hidden property is not the same as its isVisible property. The hidden property indicates whether the element should be displayed, while isVisible indicates if it is actually displayed.

JavaScript
let isHidden = $w("#myElement").hidden; // false
Did this help?

isVisible


isVisiblebooleanRead-only

Indicates if the element is actually visible.

If isVisible is true, the element is displayed on the page.

If isVisible is false, the element is not displayed on the page.

The value of the isVisible property is calculated based on the hidden, collapsed, rendered, and deleted properties of the element and all of its ancestors. isVisible is true only the element is displayed on the page. This means that for the element and its ancestors, rendered is true and hidden, collapsed, and deleted are false.

Notes:

  • An element's isVisible property is not the same as its hidden property. The isVisible property indicates whether the element is actually displayed, while hidden indicates if it should be displayed.

  • The isVisible property of an element remains true even if another element completely covers it so that a user cannot see it.

  • In Wix Studio, even if the isVisible property of the element is true, it will not be displayed if the element has been set to Hide for the current breakpoint in the Layers more actions menu.

Get whether an element is visible
JavaScript
let isVisible = $w("#myElement").isVisible; // true
Did this help?


rel


relstring

Gets or sets the relationship between the link's source page and the target page.

The rel property provides additional context to search engines and browsers about how they should treat the link, influencing SEO, security, and other link behavior.

Supported values:

  • 'noopener': Prevents the target page from accessing the source page with the window.opener property, reducing the risk of malicious code.
  • 'noreferrer': Prevents the browser from sending referrer information, such as the URL of the source page, to the target page. This enhances user privacy by ensuring the target page can't track the origin of the visit.
  • 'nofollow': Tells search engines not to pass SEO link equity to the target page. This helps prevent the manipulation of search rankings and maintains the integrity of your site's SEO.
  • 'sponsored': Indicates that the link is part of a paid or promotional arrangement, ensuring transparency and compliance with search engine guidelines.

An element can have multiple rel values as a single string with each value separated by a space. For example, 'nofollow sponsored'.

The default value for external web links (starting with http:// and https://) is 'noopener'.

JavaScript
let rel = $w("#myElement").rel; // "noopener"
Did this help?

target


targetstring

Sets or gets the target of the element's link.

An element's target determines where its link opens. The target can be set so the link opens in the current page or in a new page.

Supported values are:

  • "_blank": The link opens in a new tab or window.
  • "_self": The link opens in the tab or window.

Note: Link targets are only supported for external web links (e.g. http://www.wix.com).

JavaScript
let url = $w("#myElement").target; // "_blank"
Did this help?

effects


effectsEffectsRead-only

An object containing functionality for displaying the effects defined for an element using Wix Studio.

Note: This API can only be used in Wix Studio.

Get an element's effects
JavaScript
let myEffects = $w("#myElement").effects; let firstEffect = myEffects[0];
Did this help?

delete( )


Deletes an element from the DOM. This is a temporary deletion. Use restore to restore the deleted element.

SEO crawlers cannot find content in an element whose deleted status is true. Content in an element that is in hidden status can be found by crawlers.

Note: An element whose deleted status is true can be edited.

The delete() function returns a Promise that is resolved when the element's deleted property has been set to true.

Method Declaration
Copy
function delete(): Promise<void>
Request
This method does not take any parameters
JavaScript
$w("#myElement").delete();
Did this help?

onMouseIn( )


Adds an event handler that runs when the pointer is moved onto the element.

Method Declaration
Copy
function onMouseIn(handler: function): Element;
Method Parameters
handlerfunctionRequired

handler(event: MouseEvent): void The name of the function or the function expression to run when the pointer is moved onto the element.

Returns
Return Type:Element
Get the mouse event info when the mouse enters an element
JavaScript
$w("#myElement").onMouseIn((event) => { let clientX = event.clientX; // 362 let clientY = event.clientY; // 244 let offsetX = event.offsetX; // 10 let offsetY = event.offsetY; // 12 let pageX = event.pageX; // 362 let pageY = event.pageY; // 376 let screenX = event.screenX; // 3897 let screenY = event.screenY; // 362 });
Did this help?

onMouseOut( )


Adds an event handler that runs when the pointer is moved off of the element.

Method Declaration
Copy
function onMouseOut(handler: function): Element;
Method Parameters
handlerfunctionRequired

handler(event: MouseEvent): void The name of the function or the function expression to run when the pointer is moved off of the element.

Returns
Return Type:Element
Get the mouse event info when the mouse exits an element
JavaScript
$w("#myElement").onMouseOut((event) => { let clientX = event.clientX; // 362 let clientY = event.clientY; // 244 let offsetX = event.offsetX; // 10 let offsetY = event.offsetY; // 12 let pageX = event.pageX; // 362 let pageY = event.pageY; // 376 let screenX = event.screenX; // 3897 let screenY = event.screenY; // 362 });
Did this help?

onViewportEnter( )


Adds an event handler that runs when an element is displayed in the viewable part of the current window.

An element enters the viewport when the page is scrolled to show any part of the element. An element also enters the viewport if it was hidden or collapsed and is then shown or expanded in the viewable part of the current window. onViewportEnter() is not fired for hidden or collapsed elements even if they are scrolled into view.

Method Declaration
Copy
function onViewportEnter(handler: function): Element;
Method Parameters
handlerfunctionRequired

handler(event: Event): void The name of the function or the function expression to run when the element enters the viewport.

Returns
Return Type:Element
Get the ID of the element that has entered the viewport
JavaScript
$w("#myElement").onViewportEnter((event) => { let targetId = event.target.id; // "myElement" });
Did this help?

onViewportLeave( )


Adds an event handler that runs when an element is no longer displayed in the viewable part of the current window.

An element leaves the viewport when the page is scrolled so that the element is completely out of view. An element also leaves the viewport if it was shown or expanded and is then hidden or collapsed from the viewable part of the current window. onViewportLeave() is not fired for hidden or collapsed elements even if they are scrolled out of view.

Method Declaration
Copy
function onViewportLeave(handler: function): Element;
Method Parameters
handlerfunctionRequired

handler(event: Event): void The name of the function or the function expression to run when the element leaves the viewport.

Returns
Return Type:Element
Get the ID of the element that has left the viewport
JavaScript
$w("#myElement").onViewportLeave((event) => { let targetId = event.target.id; // "myElement" });
Did this help?

restore( )


Restores a deleted element to the DOM.

The restore() function returns a Promise that is resolved when the element's deleted property has been set to false. See the delete function.

Method Declaration
Copy
function restore(): Promise<void>;
Request
This method does not take any parameters
JavaScript
$w("#myElement").restore();
Did this help?

scrollTo( )


Scrolls the page to the top of the element using an animation.

The scrollTo() function returns a Promise that is resolved when the animated scroll is complete and the element is in view.

To scroll to a specific location on the page, see the wix-window-frontend scrollTo() function.

Tip: Use the wix-window-frontend scrollTo() function to scroll directly to an element, and also disable the animation. To get the coordinates for scrolling, display the Wix Editor Toolbar. In the Editor, move the cursor to the top-left pixel where you want the page to scroll to. The X and Y axis Position values show the coordinates.

Note: To use scrollTo() with a header element, the Header Scroll Setting must be set to Scrolls with site. To scroll to the header with other settings, use the wix-window-frontend scrollTo() function.

Method Declaration
Copy
function scrollTo(): Promise<void>;
Request
This method does not take any parameters
JavaScript
$w("#myElement").scrollTo();
Did this help?

collapse( )


Collapses the element and sets its collapsed property to true.

The collapse() function returns a Promise that is resolved when the element's collapsed property has been set to true.

To learn about the behavior of a collapsed element, see the collapsed property.

You can also collapse an element when the page loads by using the Properties and Events panel in the Editor.

Note: The collapse() function doesn't remove elements from the DOM. To soft delete an element from the DOM, use the delete() function.

Method Declaration
Copy
function collapse(): Promise<void>;
Request
This method does not take any parameters
JavaScript
$w("#myElement").collapse();
Did this help?

expand( )


Expands the element and sets its collapsed property to false.

The expand() function returns a Promise that is resolved when the element's collapsed property has been set to false.

To learn about the behavior of an expanded element, see the collapsed property.

Notes:

  • In Wix Studio, an element will not become visible by using expand() if it has been marked as "Don't Display" for the current breakpoint. Calling expand() will however, change the collapsed property of the element to false.

  • It is recommended not to mix expand() and collapse() with Hide and Show in Wix Studio.

Method Declaration
Copy
function expand(): Promise<void>;
Request
This method does not take any parameters
JavaScript
$w("#myElement").expand();
Did this help?

hide( )


Hides the element and sets its hidden property to true, using an effect if specified.

The hide() function hides the element and returns a Promise that is resolved when the effect is complete and the element's hidden property has been set to true.

Note: The hide() function doesn't remove the element from the DOM. To temporarily delete an element from the DOM and prevent it from detection by SEO crawlers, use the delete() function.

To learn about the behavior of a hidden element, see the hidden property.

You can optionally apply an effect when hiding the element by providing an effectName value. You can also customize the effect by providing the optional effectOptions object.

Effects:

  • "arc"
  • "bounce"
  • "fade"
  • "flip"
  • "float"
  • "fly"
  • "fold"
  • "glide"
  • "puff"
  • "roll"
  • "slide"
  • "spin"
  • "turn"
  • "zoom"

You can also hide an element when the page loads by using the Properties and Events panel in the Editor.

Method Declaration
Copy
function hide(effectName: string, effectOptions: union): Promise<void>;
Method Parameters
effectNamestring

The name of the effect to play when hiding the item.


effectOptionsunion

The effect's options.

JavaScript
$w("#myElement").hide();
Did this help?

show( )


Shows the element and sets its hidden property to false, using an effect if specified.

The show() function shows the element and returns a Promise that is resolved when the effect is complete and the element's hidden property has been set to false.

You can optionally apply an effect when showing the element by providing an effectName value. You can also customize the effect by providing the optional effectOptions object.

This table shows possible effectName values and their corresponding names in the editor:

Effect Name ValueEditor Animation Name
"arc"Arc-In
"bounce"Bounce-In
"fade"Fade-In
"flip"Flip-In
"float"Float-In
"fly"Fly-In
"fold"Fold-In
"glide"Glide-In
"puff"Puff-In
"roll"Reveal
"slide"Slide-In
"spin"Spin-In
"turn"Turn-In
"zoom"Expand-In

Notes:

  • In Wix Studio, the show () function will not make an element visible for a given breakpoint if the element has been set to "Hide for that breakpoint in the Layers more actions menu. Calling show() however, will change the hidden property of the element to false.
  • It is recommended not to mix show() and hide() with Hide and Show in Wix Studio.
Method Declaration
Copy
function show(effectName: string, effectOptions: union): Promise<void>;
Method Parameters
effectNamestring

The name of the effect to play when showing the item.


effectOptionsunion

The effect's options.

JavaScript
$w("#myElement").show();
Did this help?

onClick( )


Adds an event handler that runs when the element is clicked.

An element receives a click event when a user clicks on the element and releases.

When a user double-clicks an element, two click events are fired before a doubleClick event is also fired.

Note: To avoid unpredictable behavior, don't set redirect links in the editor for elements that already have an onClick event handler.

Method Declaration
Copy
function onClick(handler: function): Element;
Method Parameters
handlerfunctionRequired

handler(event: MouseEvent): void The name of the function or the function expression to run when the element is clicked.

Returns
Return Type:Element
JavaScript
$w("#myElement").onClick((event) => { let targetId = event.target.id; // "myElement" });
Did this help?

onDblClick( )


Adds an event handler that runs when the element is double-clicked.

An element receives a dblClick event when a user double-clicks on the element and releases.

When a user double-clicks an element, two click events are fired before a doubleClick event is also fired.

Method Declaration
Copy
function onDblClick(handler: function): Element;
Method Parameters
handlerfunctionRequired

handler(event: MouseEvent): void The name of the function or the function expression to run when the element is clicked.

Returns
Return Type:Element
Get the ID of the element that was double-clicked
JavaScript
$w("#myElement").onDblClick((event) => { let targetId = event.target.id; // "myElement" });
Did this help?