remove external css properties using jquery

Question

I have html like this

<table>
 <tr>
  <td>date</td>
  <td>name</td>
 </tr>
 <tr>
  <td>aug</td>
  <td>tr</td>
 </tr>
</table>

and this is the css external @media queries(max-width:768px)

td{
 display:block
}

How can I remove the display: block in external css using jQuery? I tried this but I think its only working on inline css

$("td").css({"display":""});

I cant remove the display: block in external css cause I need it in another pages

I tried to read this also but only removing the display was the best solution. Can anyone help me?

and I guess, this is not correct {"display":""}. You should set one of the "display" values not "" — Pavlo
– Pavlo, Commented Jun 22, 2017 at 7:47
@Pasha yes but i not to remove the display itself in just one page or override it. — Pure Rhymer Organization
– Pure Rhymer Organization, Commented Jun 22, 2017 at 7:52
that page has an id or class, which is it ? or what does that table on that page have in particular from other pages ? — Mihai T
– Mihai T, Commented Jun 22, 2017 at 7:56
@MihaiT i need to maintain the TD's as what is it when in mobile — Pure Rhymer Organization
– Pure Rhymer Organization, Commented Jun 22, 2017 at 7:59

Mihai T · Accepted Answer · 2017-06-22 08:24:39Z

1

If you say the page where you want to change the display:block style, doesn't have anything in particular that could differentiate it from other pages like an id or class. Or some wrapper outside the table etc. ,then you can't specify the style only for that page in particular.

You should know that you cannot just 'delete' styles. You can just overwrite them with other styles. All elements have a bunch of styles set by default. Like td have display:table-cell;visibility:visible;opacity:1 etc. . block elements have display:block etc. , see here css initial values

So what you can do is maybe set a specific class to that table you want to change, and then in css write

table:not(.myTable) td {
    display:block;
}

And so, the display:block style will NOT be applied to the desired table cells and the td will stay with default style, display:table-cell

You could also write ( if you don't want to change the style you already set )

table td {
     display:block;
}
table.myTable td {
      display:table-cell;
}

Or there are many possibilities to change/overwrite css styles ( using css or javascript etc. ) , but you can't just 'remove' styles. As i said before, every html element has initial styles set for every property.

see snippet with CSS

td {
	display:block;
	color:red;
}
table.myTable td {
	display:table-cell;
	color:blue
}

<!-- Table with td display:block-->
<table>
<tr>
<td>aa</td>
<td>bb</td>
</tr>
</table>
<!-- Table with td display:table-cell-->
<table class="myTable">
<tr>
<td>aa</td>
<td>bb</td>
</tr>
</table>

overwrite property with JQ

$("td").css({
  "display": "table-cell",
	"color":"blue"
})

td {
  display: block;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Table with td display:block-->
<table>
  <tr>
    <td>aa</td>
    <td>bb</td>
  </tr>
</table>

edited Jun 22, 2017 at 8:24

answered Jun 22, 2017 at 8:12

Mihai T

17.8k2 gold badges26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Pure Rhymer Organization Over a year ago

I tried that also putting another property values on display still hopeless.

Mihai T Over a year ago

@PureRhymerOrganization how did you try to put the other property value ? you need to be as specific as possible, so you can overwrite the style already set. So write a more specific path like body #content table.myTable td { display:table-cell} . In worst case scenario use !important after the style, but i strongly suggest you avoid using it

Pure Rhymer Organization Over a year ago

By using jQuery I added another property value on it that listed on that site and display:table-cell doesnt work.

Mihai T Over a year ago

@PureRhymerOrganization added 2 examples. 1 with CSS 1 with JQ . one of them should work for you

Pure Rhymer Organization Over a year ago

I tried that also but it doesnt work trying to change the property values

|

Mr.Pandya · Accepted Answer · 2017-06-22 07:47:13Z

1

You cant change external css property using javascript, but you can override those properties defined in external style sheet. javascript styles takes higher precedence than external style sheet

answered Jun 22, 2017 at 7:47

Mr.Pandya

2,0562 gold badges16 silver badges25 bronze badges

10 Comments

Pure Rhymer Organization Over a year ago

How can I override those properties? I used $("td").css({"display":""}); to override it but still no luck

Mr.Pandya Over a year ago

That works properly, just check in your console is there any error

Pure Rhymer Organization Over a year ago

but that code only works on inline css it cant override the external css

Pure Rhymer Organization Over a year ago

It can override the external css if I put a correct property value of display for example .css({"display":"inline"}) it will override but in my case I need to remove the display

Mr.Pandya Over a year ago

You must specify` key` and value pair

|

itacode · Accepted Answer · 2017-06-22 08:01:18Z

1

Please try the following:

$("td").css({"display":"table-cell"});

Did you try also this?

$("td").each(function () {
  this.style.display = '';
});

Otherwise you could add a class to override and reset the style to table-cell.

edited Jun 22, 2017 at 8:01

answered Jun 22, 2017 at 7:47

itacode

3,7873 gold badges23 silver badges25 bronze badges

1 Comment

Pure Rhymer Organization Over a year ago

I tried all display property values but still not fixing my problem but by removing the display itself it will fix my problem

Collectives™ on Stack Overflow

remove external css properties using jquery

3 Answers 3

7 Comments

10 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related