2

データ キャプションの値にインライン スタイル シートを使用しています。インライン スタイル シートを削除してクラスで定義するにはどうすればよいですか? 値は data-caption 属性から取得されるため、その方法がわかりません。以下に私のコードを提供します：

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

1 に答える 1

0

1 つの解決策は、Javascript を使用してスタイルを解析し (この質問の最初の回答: Can jQuery get all CSS styles associated with an element? )、スタイルをダンプする関数を作成することです。

次に、このスタイルをページに動的に追加できます (この質問の最初の回答: JavaScript で CSS クラスを動的に作成して適用する方法は? )。

編集：

data-caption属性にアクセスするには、次を使用でき$('.cubeCell').attr('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;

それは（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したがって、属性にはスタイルだけではないようです。のみを取得するには、正規表現を使用してこの文字列を解析する必要がありますstyles。次に、正しいスタイルを作成し、Javascript を使用してページに追加できるようになります。( regexp (javascript) を使用して style="i want the css code" を取得する方法)

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

コードが正常に実行され、スタイルが適用されるように、コード行の順序を尊重することを忘れないでください。

于 2013-03-01T15:24:37.513 に答える