Skip to main content

Bug Tracker

Side navigation

#11579 closed feature (plugin)

Opened April 10, 2012 02:51PM UTC

Closed April 10, 2012 03:01PM UTC

Last modified May 07, 2012 09:18PM UTC

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

Reported by: paul.a.dibiase@gmail.com Owned by:
Priority: undecided Milestone: None
Component: unfiled Version: git
Keywords: Cc:
Blocked by: Blocking:
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.

Attachments (0)
Change History (4)

Changed April 10, 2012 03:01PM UTC by dmethvin comment:1

resolution: → plugin
status: newclosed

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

Changed April 10, 2012 06:08PM UTC by g19fanatic comment:2

Replying to [comment:1 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.

Changed April 10, 2012 06:27PM UTC by dmethvin comment:3

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?

Changed May 07, 2012 09:18PM UTC by Benji Fisher <benji@FisherFam.org> comment:4

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.