How to parse the default css property to inline style attribute


Tags: jquery,html,css,html5

Problem :

At the moment I have a page where users can create divs and drag/drop them into another div id="holder".

I have a save button that gets the html of holder. $('#Holder').html();

The divs in holder have some styling from a CSS file and inline styling: style="left:10px; right:10px; background-color:#000000;" added by jQuery.

What I want is to combine the styling from my CSS file with the inline styling so I am able to use $('#holder').html(); and have all styles.

Question: How can I parse the CSS styling into the style="" attr.

So after the info an example of what I have: http://jsfiddle.net/Ub9ZD/

As you can see im missing the width, height and position style.

== EDIT ==

After looking at given link I'm still stuggling with this.

I still can't combine the inline style and CSS style from file.

Progress: http://jsfiddle.net/Ub9ZD/39/



Solution :

That's not as easy as it sounds, not by a long shot. If you want to look at an object's CSS properties, you can use the .css() function jQuery provides. Essentially, you'd retrieve each of the element's styles via the .css() function and reapply them to the element with the htmlELement.style method. Then, theoretically, .html() would give you a list of all the CSS styles on that element.

Are you sure that's what you need, or can you just use .css() the way it's intended?


    CSS Howto..

    Is XSS possible via an @import, and if so how? Are there ways to protect against it?

    How to align this bootstrap radio button?

    How do I create an animation of scrolling text with just HTML and CSS (or java i guess) like apple used to have on their livepage?

    How to load CSS using jquery

    How to remove an element without id

    How to deal with `rowspan` and background colors within a table?

    How to hold three different text alignments in one CSS Box?

    two divs in one div with img in each two, how to autoresize but keep row formation?

    How to set a css class based on content in rails

    How do I make half a hexagon shape using CSS with a border over a rectangle with a border with an image in the middle of the half hexagon

    css - How to make the view window grows while the user zooms in?

    How can I use html tag in this javascript? [duplicate]

    How to remove the arrows in a scroll bar through CSS

    How to blur one side of the div using CSS

    How to make expand-collapse different div heights according to device width using css/javascript

    How are styles within div's made 'safer' (i.e. so they do not override parent styles)

    How to apply same CSS property without overriding and multiple times using jquery?

    How to convert 1 column records of dynamic table into hyperlink

    How to make div to expand vertically without using overflow or javascript or hardcoded values such as margins

    CSS3: How to add more than 2 CSS Ribbon effects to same banner?

    How to make a scrolling row of Divs using CSS & Javascript?

    How to create css classes which are “stronger” that elements?

    How to make an empty div or container glow with pure CSS?

    How to zoom in / out depending on browser height, using CSS zoom property? [closed]

    All nested menus show when hovering over menu instead of just the first

    How to isolate PrimeFaces Widget from being affected by main site CSS

    How do I float a
  • to the right in CSS?
  • CSS Sprites - How to leave Hover button in depressed state

    CSS how to keep text always inline with a paragraph

    How to get item to appear on mobile homepage only(wordpress)