Question

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

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

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

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

1 个答案: