The URL formats for images are:
wix:image://v1/<uri>/<filename>#originWidth=<width>&originHeight=<height>[&watermark=<watermark_manifest_string>]
http(s)://<image url>
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:
.image {
width: 200px;
height: 200px;
border-radius: 50%;
filter: drop-shadow(16px 16px 10px gray);
cursor: grab;
}
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:
let altText = $w("#myImage").alt; // "Alt text"
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.
let action = $w("#myImage").clickAction; // "magnified"
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.
"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.
"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.
"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.
Getting the fitMode
property returns the current fit mode.
Tip: To learn more, see this fitMode example.
let mode = $w("#myImage").fitMode; // "fixedWidth"
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:
wix:image://v1//#originWidth=&originHeight=[&watermark=]
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.
let imageSource = $w("#myImage").src;
// "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg#originWidth=1970&originHeight=112
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.
let toolTipText = $w("#myImage").tooltip; // "Tooltip text"
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.
$w("#myElement").customClassList.values(); // ["className1", "className2"]
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:
deleted
status is true
can be edited.deleted
status is false
will not be displayed if the element has been set to Hide.const isDeleted = $w("#myElement").deleted; // true
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.
let isGlobal = $w("#myElement").global; // false
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.
let myId = $w("#myElement").id; // "myElement"
let parentElement = $w("#myElement").parent;
let parentId = parentElement.id; // "page1"
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.
let isRendered = $w("#myElement").rendered; // true
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
let myType = $w("#myElement").type; // "$w.Type"
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:
hidden
.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.
let isCollapsed = $w("#myElement").collapsed; // false
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:
collapsed
.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.
let isHidden = $w("#myElement").hidden; // false
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.
let isVisible = $w("#myElement").isVisible; // true
Sets or gets the element's link.
When the element is clicked, the browser navigates to the link
location.
The different types of links you can use are:
/localPageURL
: another page on your site/
: your site's home pagehttp(s)://
: an external web addresswix:document://
: a document stored in the Media Managermailto:?subject=
: an emailtel:
: a phone numberThe link
property attempts to properly encode the URL value that
you set. For example, .../some page
is encoded to .../some%20page
.
However, some URLs do not have one unambiguous encoding. In those cases
it is up to you to encode the URL to reflect your intentions. Because of
these situations, it is a best practice to always encode URLs before you
set them as the value of the link
property. Regardless of how you set
the link
property, when you get its value, it returns an encoded URL.
Note that Wix URLs do not contain spaces. A page which has spaces in its
name has its spaces replaced with dashes (-
). Similarly,
a dynamic page URL which
contains the value of a field in your collection with spaces
has its spaces replaced with dashes (-
).
let url = $w("#myElement").link; // "http://mysite.com"
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'
.
let rel = $w("#myElement").rel; // "noopener"
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
).
let url = $w("#myElement").target; // "_blank"
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.
let myEffects = $w("#myElement").effects;
let firstEffect = myEffects[0];
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
.
function delete(): Promise<void>
$w("#myElement").delete();
Adds an event handler that runs when the pointer is moved onto the element.
function onMouseIn(handler: function): Element;
handler(event: MouseEvent): void
The name of the function or
the function expression to run when the pointer is moved onto the
element.
$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
});
Adds an event handler that runs when the pointer is moved off of the element.
function onMouseOut(handler: function): Element;
handler(event: MouseEvent): void
The name of the function or
the function expression to run when the pointer is moved off of
the element.
$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
});
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.
function onViewportEnter(handler: function): Element;
handler(event: Event): void
The name of the function or
the function expression to run when the element enters the viewport.
$w("#myElement").onViewportEnter((event) => {
let targetId = event.target.id; // "myElement"
});
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.
function onViewportLeave(handler: function): Element;
handler(event: Event): void
The name of the function or
the function expression to run when the element leaves the viewport.
$w("#myElement").onViewportLeave((event) => {
let targetId = event.target.id; // "myElement"
});
$w("#myElement").restore();
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.
function scrollTo(): Promise<void>;
$w("#myElement").scrollTo();
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.
function collapse(): Promise<void>;
$w("#myElement").collapse();
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.
function expand(): Promise<void>;
$w("#myElement").expand();
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.
function hide(effectName: string, effectOptions: union): Promise<void>;
The name of the effect to play when hiding the item.
The effect's options.
$w("#myElement").hide();
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 Value | Editor 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:
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
.show()
and hide()
with Hide and Show in Wix Studio.function show(effectName: string, effectOptions: union): Promise<void>;
The name of the effect to play when showing the item.
The effect's options.
$w("#myElement").show();
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.
function onClick(handler: function): Element;
handler(event: MouseEvent): void
The name of the function or
the function expression to run when the element is clicked.
$w("#myElement").onClick((event) => {
let targetId = event.target.id; // "myElement"
});
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.
function onDblClick(handler: function): Element;
handler(event: MouseEvent): void
The name of the function or
the function expression to run when the element is clicked.
$w("#myElement").onDblClick((event) => {
let targetId = event.target.id; // "myElement"
});