6

I am developing a online website design system like yola.com.

I want to get a list of applied CSS properties with their values to any DOM element.

For example, I have a h1 tag and its css changes randomly by jquery ui when resizing and dragging, also changes its text decoration and also the text contents by tinymce and so on.

I have a save button in this page. When I click save, I want to save all these changes in to a database using php. Now my aim is to know only the css and inner text content of each element. How can I do this?

Pedro Correia
  • 793
  • 3
  • 8
thecodeparadox
  • 86,271
  • 21
  • 138
  • 164
  • 1
    What is "achieve CSS Properties on fly"? – BoltClock Apr 10 '11 at 09:50
  • 1
    Voting to close. You need to add more context – JohnP Apr 10 '11 at 09:51
  • 2
    Which ones? Ones set via inline style? Ones set in the author stylesheet? Ones set in the browser stylesheet? Standard properties only? Proprietary browser properties too? – Quentin Apr 10 '11 at 09:52
  • @abdullah if you fix this question, please give us a ping (by adding a comment here with `@username` in it) so we can vote to reopen. – Pekka Apr 10 '11 at 10:05
  • @JohnP,@BoltClock,@Pekka,@DavidDorward: I think this will make all of you clear about my target .AS I am new user,so sorry for my mistake. – thecodeparadox Apr 10 '11 at 10:16
  • Okay, so you want to save a document's state (including all CSS properties, changed elements...) into a database. Hmm, that could be tough, I'll see whether I can dig up a duplicate. (Voting to reopen; pinging @David again because pinging works for the first two users you mention only) – Pekka Apr 10 '11 at 10:18
  • 1
    Have a look at this question : http://stackoverflow.com/questions/4172871/ It's a starting point – JohnP Apr 10 '11 at 10:22
  • 2
    I changed the question's title to make more clear what you want. If you don't like it, feel free to roll back. – Pekka Apr 10 '11 at 10:23
  • @David Now the question is clear.Provide some solutions please.It was my mistake, sorry. – thecodeparadox Apr 10 '11 at 11:03
  • @Pekka Thanks for your help. Problem solved, though I don't get any solution. Thanks again. – thecodeparadox Apr 11 '11 at 03:25
  • You could use window.getComputedStyle, but that will give all style properties, not just the ones that are applied. – Gerben Apr 16 '11 at 18:54
  • You have to walk the dom, but why on earth would you need to do this? – Pedro Correia May 11 '11 at 11:11

1 Answers1

1

In javascript you can find the current class name of an element by calling 

element.getClassName();

In at least current versions of firefox and chrome you can find the directly applied styles with

element.getAttribute("style");

This will include programmatically applied positions, e.g. on http://jqueryui.com/demos/draggable/ you can do 

document.getElementById('draggable').getAttribute("style");
"position: relative; "

and after dragging the draggable around, if you do it again, you'll get the current position:

document.getElementById('draggable').getAttribute("style");
"position: relative; left: 63px; top: 39px; "

You can get the contents of the element with element.innerHTML. That, plus the style plus the classname will probably be enough to serialise an element correctly. If you want to serialise a full tree of complex components, it would be a slightly more complicated process - innerHTML will only work well for relatively simple elements.

kybernetikos
  • 8,281
  • 1
  • 46
  • 54