Remove inline style sheets from data caption

Question

I am using inline style sheets for my data-caption value. How do I remove the inline style sheets and define it in a class? Since the value comes from the data-caption attribute, I don't know how to do it. Providing my code below:

http://jsfiddle.net/rajkumart08/8YK2n/

<div  class="cubeCell" data-text="Search" class="desktopContactImage cubeCell"
   data-caption="&lt;a style='padding-left: 40px; font-size: 18px; color: grey;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='padding-left: 40px; font-size: 18px; color: grey;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='padding-left: 40px; font-size: 18px; color: grey;' &gt;Labels&lt;/a&gt;"
   data-image="http://intra.defie.co/images/Desktop_icons_02.07.13/search.png"></div>

   <div class="iphoneContactImage" data-caption="&lt;a style='margin-left: 92px; font-size: 18px; color: grey;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;Labels&lt;/a&gt;"
      data-image="http://intra.defie.co/images/Desktop_icons_02.07.13/demoImage.png">iphoneImage</div>

Answer 1

One solution is to parse the styles using Javascript (First answer of this question: Can jQuery get all CSS styles associated with an element?) and create a function to dump them into and style.

Then, you can add this style to your page dynamically (First answer of this question: How to dynamically create CSS class in JavaScript and apply?).

EDIT:

To access to data-caption attribute, you can use $('.cubeCell').attr('data-caption') and it will return an string containing the style in plain text:

<a style='padding-left: 40px; font-size: 18px; color: grey;' href='http://www.w3schools.com/' >Create</a> <div> <a style='padding-left: 40px; font-size: 18px; color: grey;' >View/Edit</a> </div> <a style='padding-left: 40px; font-size: 18px; color: grey;' >Labels</a>

That it's the same to (substituing HTML characters):

<a style='padding-left: 40px; font-size: 18px; color: grey;' href='http://www.w3schools.com/' >Create</a>
<div>
   <a style='padding-left: 40px; font-size: 18px; color: grey;' >View/Edit</a>
</div>
<a style='padding-left: 40px; font-size: 18px; color: grey;' >Labels</a>

So it seems like you have more than only styles in data-caption attribute. You should parse this string using a Regular Expression to retrieve only styles. Then you will be able to create the correct styles and add them to your page using Javascript. (how to get style="i want the css code" using regexp (javascript))

EDIT 2:

Suppose that you already have the style in an string:

var mystyle = 'padding-left: 40px; font-size: 18px; color: grey;';

And you want to apply it to an element that already have an style inline, like your example. I will do it in the following way:

1) Take the HTML of the element (without style attribute) and assign it to where it belongs. For example:

Original code:

<div id="mylink">
    <a style='padding-left: 40px; font-size: 18px; color: grey;' href='http://www.w3schools.com/'>Create</a>
</div>

JS:

$('#mylink').html('<a href='http://www.w3schools.com/'>Create</a>');

Resulting code:

<div id="mylink">
    <a href='http://www.w3schools.com/'>Create</a>
</div>

2) Now, add your own class to handle the style:

$('#mylink a').addClass('mystyle');

3) Finally, you only need to create the style element and add it to your page:

var style = document.createElement('style');
var mystyle = 'padding-left: 40px; font-size: 18px; color: grey;';
style.type = 'text/css';
style.innerHTML = '.mystyle { ' + mystyle + ' }';
document.getElementsByTagName('head')[0].appendChild(style);

Don't forget to respect the order of your code lines so your code execute and apply styles succesfully.