Using jQuery to modify CSS attributes is proving to be more challenging than I anticipated

Question

I am attempting to modify a CSS attribute using jQuery. I have used the following code:

wrapperInner.css('overflow', 'visible');

However, the value remains unchanged. When I use an alert

alert(wrapperInner.css('overflow'))

, it displays as hidden. Below is the CSS related to this issue:

.tribe-events-calendar td div.wrapper div.wrapper_inner {
    position:relative;
    overflow:hidden!important;
}

Answer 1

Answer №1

The !important CSS rule is taking precedence over the jQuery. It should be removed to avoid conflicts.

Using !important is considered poor practice and can lead to unexpected issues—as demonstrated here.

If you're unable to remove it, consider adding a specific class with the necessary styles:

var element = $('div')   
element.addClass('highlighted');

div {
    color: red !important;
}

.highlighted {
    color: blue !important;
}

In this example, I've used colors to illustrate the point. View a live demo here.

Answer 2

The !important CSS rule is taking precedence over the jQuery. It should be removed to avoid conflicts.

Using !important is considered poor practice and can lead to unexpected issues—as demonstrated here.

If you're unable to remove it, consider adding a specific class with the necessary styles:

var element = $('div')   
element.addClass('highlighted');

div {
    color: red !important;
}

.highlighted {
    color: blue !important;
}

In this example, I've used colors to illustrate the point. View a live demo here.