Is there a way to set CSS properties like `display` using Cypress commands?

Question

I would like to hide an element by setting the display property.

I've tried using invoke to set the attribute value, but it may only work for HTML attributes?

cy.get('#hubspot-messages-iframe-container > iframe')
        .invoke('attr', 'display', 'none!important')
        .should('have.attr', 'display', 'none!important')

This seems to be setting the attribute values, but the element is still visible, which leads me to believe it's probably not recognizing my attribute or i'm using the wrong command.

Tried using this as suggested:

The .css() function seems to not be setting the value the way it should:

Here's me validating my own sanity that the selector is correct and the display is none lol:

Answer 1

This seems to work folks. I believe initial !important is a reference of some sort and not an actual value and maybe that's why .css() wouldn't work.

Cypress.Commands.add('hideHubSpot', () => {
    cy.get('#hubspot-messages-iframe-container')
        .invoke('attr', 'style', 'display: none')
        .should('have.attr', 'style', 'display: none')