从数据标题中删除内联样式表

Question

我正在使用内联样式表作为我的数据标题值。如何删除内联样式表并在类中定义它？由于该值来自数据标题属性，我不知道该怎么做。下面提供我的代码：

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

一种解决方案是解析使用Javascript（这个问题的第一个答案：Can jQuery get all CSS styles associated with an element?）的样式，并创建一个函数来他们转储到和风格。

然后，您可以将此样式动态添加到您的页面（此问题的第一个答案：How to dynamically create CSS class in JavaScript and apply?）。

编辑：

要访问data-caption属性，你可以使用$('.cubeCell').attr('data-caption')，它会返回一个包含纯文本的样式的字符串：

<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>

，它是同向（代替HTML字符）：

<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> 

因此，您似乎有不止data-caption属性中的样式。您应该使用Regular Expression解析此字符串以检索styles。然后，您将能够创建正确的样式并使用Javascript将它们添加到您的页面。 （how to get style="i want the css code" using regexp (javascript)）

编辑2：

假设你已经有风格的字符串：

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

你想将它应用到已经有一个风格的行内元素，像你的例子。我会做下列方式：

1）取元素的HTML（不style属性），并指定 它原来的位置。例如：

原始代码：

<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>'); 

产生的代码：

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

2）现在，添加自己的类来处理风格：

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

3）最后，你只需要创建style元素，并将其添加到您的网页：

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); 

不要忘记尊重代码行的顺序，以便代码执行并成功应用样式。