Bug Tracker

Ticket #11579 (closed feature: plugin)

Opened 3 years ago

Last modified 3 years ago

Modify 'document.stylesheet' directly in addition to individual elements' CSS

Reported by: paul.a.dibiase@… Owned by:
Priority: undecided Milestone: None
Component: unfiled Version: git
Keywords: Cc:
Blocking: Blocked by:

Description

As featured on this  website, it would be very beneficial if there was a function to modify specific classes using the page css.

This is a different tact than what JQuery currently does (searches for elements with a specific class i.e. $('.className') ).

The use case for something like this is when you have a very large data set with a large number of elements. Each of them has a class but you want to hide a specific element from being displayed. Normally we'd just do a search for elements with that class and then change the css using $.css(). But since there are hundreds of elements, this takes seconds to complete. If you were able to change the actual stylesheet for the page, then this change would happen immediately.

A prime example of this situation is shown  here on SO.

Change History

comment:1 follow-up: ↓ 2 Changed 3 years ago by dmethvin

  • Status changed from new to closed
  • Resolution set to plugin

There are several jQuery stylesheet plugins, this does not need to be added to core.

comment:2 in reply to: ↑ 1 Changed 3 years ago by g19fanatic

Replying to dmethvin:

There are several jQuery stylesheet plugins, this does not need to be added to core.

Yes there are several stylesheet plugins but none do what I describe. It's not possible to do what I've described using jQuery. A plugin for jQuery uses some jQuery methods to accomplish more complicated things. What I'm describing isn't doable with jQuery (but is doable with javascript), hence the reason to include it in core.

comment:3 Changed 3 years ago by dmethvin

What I'm describing isn't doable with jQuery (but is doable with javascript), hence the reason to include it in core.

Not sure I follow that logic but some code might be clearer. Can you point me to the Javascript implementation?

comment:4 Changed 3 years ago by Benji Fisher <benji@…>

My first post here. Please forgive newbie errors.

The OP gave a link to  http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript and I think that  http://www.quirksmode.org/dom/changess.html gives similar information.

IIUC, the OP wants to do something similar to what I want to do. Say I have a bunch of

<div class="foo">...</div>

elements on my page. A big bunch. I would like to have buttons that let me change from

div.foo {background-color: #FFFFFF;}

to

div.foo {background-color: #CCCCCC;}

and back again. I know I could use something like (untested)

$('div.foo').css('background-color', '#FFFFFF');

and

$('div.foo').css('background-color', '#CCCCCC');

instead, but it seems as though it *should* be simpler to change one CSS rule than to modify every div.foo element on my page.

According to the two references, it is possible to do it in javascript, but the cross-browser differences make it look like the sort of thing that jQuery does so well.

Note: See TracTickets for help on using tickets.