Affecting Elements

jQuery has many different methods for affecting elements.

---

.text()

Sets new text on an element

$(".hero-heading").text("Hello");

Gets the current text of an element

let heroHeadingText = $(".hero-heading").text();

---

.addClass()

Adds a class to an element.

$(".card").addClass("is-active");

Note: period not added before is-active because .addClass already indicates that we're passing in a class name.

---

.removeClass()

Removes a class from an element

$(".card").removeClass("is-active");

---

.toggleClass()

Adds a class if that class is not already on the element. Removes a class if that class is already on the element.

$(".card").toggleClass("is-active");

---

.hasClass()

Returns true or false based on if an element has a certain class

let menuButton = $(".menu-button");

menuButton.on("click", function () {
    menuButton.toggleClass("is-opened");
    if ( menuButton.hasClass("is-opened") ) {
        menuButton.text("Close Menu");
    } else {
        menuButton.text("Open Menu");
    }
});

---

.val()

Gets the value of a form field

let fieldValue = $(".form-field").val();

Sets a value on a form field

$(".form-field").val("New Value");

Clears the value of a form field

$(".form-field").val("");

---

.remove()

Deletes an element entirely from the page

$(".element-class").remove();

---

.appendTo()

Moves cta-card into the cms-list as the last child

$(".cta-card").appendTo(".cms-list");

Moves cta-card into the cms-list as the last child using variable

let cmsList = $(".cms-list");
$(".cta-card").appendTo(cmsList);

Makes a copy of cta-card and adds the copy as the last child of cms-list

$(".cta-card").clone().appendTo(".cms-list");

Creates a new div with class of "cta-card" and adds it as the last child of "cms-list"

$("<div class='cta-card'></div>").appendTo(".cms-list");

---

.prependTo()

Moves cta-card into the cms-list as the first child

$(".cta-card").prependTo(".cms-list");

---

.insertBefore()

Moves the cta-card to be right before the third cms-item

$(".cta-card").insertBefore(".cms-item:nth-child(3)");

---

.insertAfter()

Moves the cta-card to be right after the third cms-item

$(".cta-card").insertAfter(".cms-item:nth-child(3)");

---

.css()

Get or set the value of any css variable or css property like height, background-color, border-width, etc.

Gets the background color of the hero

let heroBackground = $(".hero").css("background-color");

Sets the background color of the hero

$(".hero").css("background-color", "#000");

Gets the value of the --swatch--brand css variable on the html element

let brandColor = $("html").css("--swatch--brand");

Sets the value of the --swatch--brand css variable on the html element

$("html").css("--swatch--brand", "red");

---

.attr()

Gets or sets the value of any attribute

Gets the href (url) on a link

let myUrl = $(".my-link").attr("href");

Sets the href (url) on a link

$(".my-link").attr("href", "https://www.google.com/");

Gets the source (url) of an image

$(".my-image").attr("src");

Sets the source (url) of an image

$(".my-image").attr("src", "https://www.your-website.com/person.jpg");

When using this, select the image in Webflow and ensure the "Disable responsiveness" checkbox is turned on. Otherwise multiple image sources will be generated for each screen size.

Get the arial-label of an element

let initialLabel = $(".my-button").attr("aria-label");

Set the arial-label of an element

$(".my-button").attr("aria-label", "Play Video");

Get the value of a custom data attribute

let attributeValue = $(".my-element").attr("attribute-name");

Set the value of a custom data attribute

$(".my-element").attr("attribute-name", "attribute-value");

---

.removeAttr()

Deletes an attribute and its value completely from an element

// removes all inline styles created on an element
$(".my-element").removeAttr("style");

---

.click()

Causes a click on an element

$(".my-element").click();

If the element is a link, [0] is needed because only one link can be clicked at a time.

$(".my-link")[0].click();

---

.clone()

Makes a copy of an element

// Create new element
let newElement = $(".my-element").clone();
// Do things to the cloned element
newElement.addClass("is-featured");
// Add new element to the page
newElement.appendTo("body");

Shortened version

$(".my-element").clone().addClass("is-featured").appendTo("body");

---

.html()

Gets the html inside an element

let elementContent = $(".my-element").html();

Replaces the html inside an element

$(".my-element").html("<div class='my-class'>Some text</div>");

Clears out the html inside an element

$(".my-element").html("");

---

.empty()

Deletes everything inside an element

$(".my-element").empty();

---

.wrap()

Wrap something around an element. New div with the class of "container" gets wrapped around my-element

$(".my-element").wrap("<div class='container'></div>");

---

.unwrap()

Deletes the direct parent of an element without deleting any of that parent's children

$(".my-element").unwrap();

---

.replaceWith()

Deletes element and replaces it with something else

Replace with existing element

The hero-card will be deleted and the footer-form will be moved to where the .hero-card was.

$(".hero-card").replaceWith( $(".footer-form") );

Replace with new element

The hero-card will be deleted, and a new h2 will be created in its place.

$(".hero-card").replaceWith("<h2 class='my-heading'>New heading</h2>");

---

.prop()

Gets or sets the value / state of a form element

When using a custom checkbox style, Webflow hides the real checkbox input and adds a div styled like a checkbox in its place.

Sets checkbox to checked

// get your checkbox's parent
let checkboxParent = $(".my-checkbox-parent");
// find the hidden input and set it to true
checkboxParent.find("input").prop("checked", true);
// find the visible checkbox div and add Webflow's checked class to it
checkboxParent.find(".w-checkbox-input").addClass("w--redirected-checked");

Sets checkbox to unchecked

// get your checkbox's parent
let checkboxParent = $(".my-checkbox-parent");
// find the hidden input and set it to false
checkboxParent.find("input").prop("checked", false);
// find the visible checkbox div and remove Webflow's checked class from it
checkboxParent.find(".w-checkbox-input").removeClass("w--redirected-checked");

Get value of checkbox

let isChecked = $(".my-checkbox-parent").find("input").prop("checked");

Get state of checkbox

let isDisabled = $(".my-checkbox-parent").find("input").prop("disabled");

---

.height()

Get the height of an element

let elementHeight = $(".my-element").height();

Set the height of an element

$(".my-element").height("2rem");

This can also be done with .css("height") and .css("height", "2rem")

---

.width()

Get the width of an element

let elementWidth = $(".my-element").width();

Set the width of an element

$(".my-element").width("2rem");

---

.show()

Sets element to display block

$(".my-element").show();

Can also be done with .css("display", "block")

---

.hide()

Sets element to display none

$(".my-element").hide();

---

.toggle()

Switches between display none and the original display setting

$(".my-element").toggle();

---

.focus()

Causes a focus on an element

$(".open-modal-button").on("click", function () {
    $(".name-field").focus();
});

---

.blur()

Causes a focus off of an element

let accessCodeField = $(".access-code-field");
accessCodeField.on("input", function () {
    // once field has 4 characters inside
    if (accessCodeField.val().length === 4) {
        // focus off of field
        accessCodeField.blur();
    }
});

---

.submit()

Causes a form to submit

$(".my-form-element").submit();

The <form> element in Webflow is the direct child of the Form Block.