Change all CSS property at run time

I have page which has several Button & images inside the <div>. I have such requirement :

On clicking over any image or button a div/page appears which contains all the css property and gives option to change the CSS property of concern element. eg. color, value, font size etc....

Is there any plugin availa开发者_运维技巧ble for that or do i need to create by own. I'd appreciate your suggestion

Thanks

you can refer these plugins and modify the source code according to requirement....

changecss

http://www.bramstein.com/projects/jsizes/

I doubt there will be such plugin which will know the ids/names of all your elements. The only way to have such plugin is if it searches by element type, but that will be really uncleaver, since it may list 100+ html elements, while you need to change only 5 (for example). It will be better and smarter to write it by yourself in my opinion.

jQuery makes such changes trivial, take a look at the .css() function. In order to get all elements you'll probably want to look at DOM traversal.

If you only need this for debugging purposes, you can use Chrom'e developper tools or Mozilla Firebug. They allow you to visualize and change CSS attributes on the fly.

If you need this for a shipping product, then good luck. It seems very hard, notably handling the CSS priority rules. Maybe you can get some reusable code from Firebug's code, which is mostly JS.

Use jquery for setting the desired css properties. Use selector and google for setting css properties using Jquery.