Overriding 'display' css using jQuery

Question

I'm using below css to hide an element :

.pds-pd-link {     
    display: none !important; 
}

Using jQuery can I enable the display on the css .pds-pd-link

Something like $(.pds-pd-link).css("display",""); ?

Here is related answer http://stackoverflow.com/questions/2655925/jquery-css-applying-important-styles — Artur Michalak, Jun 29 '12 at 16:05

score 2 · Answer 1 · answered Jun 29 '12 at 16:04

2

In a nutshell, yes.

Alternatively, you could use the following to show or hide the element:

$(.pds-pd-link).show();
$(.pds-pd-link).hide();

Or you could even use the toggle method to automatically switch between the two:

$(.pds-pd-link).toggle();

answered Jun 29 '12 at 16:04

Richard

1

As a side note: toggle does not perfom as well and is about 3-4 times slower than show/hide and even close to 10 times slower in IE. See here for more details: http://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance – Nope Jun 29 '12 at 16:25

score 0 · Accepted Answer · answered Jun 29 '12 at 16:06

0

Although you could do:

$(.pds-pd-link).css("display","none");

I would suggest:

$(.pds-pd-link).hide();

answered Jun 29 '12 at 16:06

Mike Mackintosh

why suggest one over the other ? – blue-sky Jun 29 '12 at 16:08
1

`.hide` uses `dispaly: none`. Using `.hide()` makes for shorter, cleaner and more readable code at no extra cost. Same goes for `.show()` which uses `.css('display', 'xxx')`. where xxx is what ever the display property was initially. If it was not set `block` is used by default. – Nope Jun 29 '12 at 16:21
Agreed, just wanted to correct the OP's original syntax on the use of `.css('display', '...');` – Mike Mackintosh Jun 29 '12 at 16:24

Artur Michalak · Answer 3 · 2012-06-29T16:13:13.287

-3

This should work

$('.pds-pd-link').css('cssText', 'display: block !important');

edited Jun 29 '12 at 16:13

answered Jun 29 '12 at 16:07

Artur Michalak

3 Answers3