從數據標題中刪除內聯樣式表

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

不要忘記尊重代碼行的順序，以便代碼執行併成功應用樣式。