CODEWITHSUNDEEP
htmlcss
yossi
yossi

Reputation: 3164

Manipulating the css itself, for performance

My idea is to use JavaScript to change the HTML content of <style> tag, in order to manipulate elements.

Assuming a table with 20,000 cells, i want to hide those who has the hide and hide-me-too class, instead of getting all the elements - i'll add/remove the HTML content

 .hide-me-too, .hide{display:table-cell/none;}

of a style element in the page.

what i ask is: should i expect problems with different brwosers? performance? any-other-issue?

Upvotes: 1

Views: 52

Answers (1)

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

If you will try to manipulate the CSSOM to control 20,000 cells you have a problem.

Better if you manipulate the DOM and change classnames.

The any-other-issue, and the most important, is if you have a table structure (<table><tr><td>) and you show cells with display:block you will crash all your layout. The correct display value for cells is display: table-cell. So don't make a single show() or hide() with jQuery, change the classnames so look like this:

.showme {
  display: table-cell;
}

.hide,
.hide-me-too {
  display: none;
}

And it's another any-other-issue, that you hide some cells, the columns will not match, so you need to play with colspan. Will be hard. Good luck.

Upvotes: 1

Related Questions