Question

我正在尝试捕获所有内联css并将其附加到具有唯一类名的样式标记。

即。来自

<div style="top: 250px; left: 250px;" class="search">

到

<div class="search custom-class1">

将在css样式标记中动态创建custom-class。

有没有办法用jQuery执行此操作？

任何帮助都将不胜感激。

Answer 1

<div id="a" class="a" style=".."></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>

..

var inlineStyle = $('#a').attr('style');
$('.a').attr('style', inlineStyle);

如果我承担任务，解决方案就是这个

Answer 2

虽然还有很多其他方法可以处理你的情况。但如果你真的想这样做。尝试这个代码，但它的工作，但如果你想要任何增强，你可以很容易地进一步。

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<html>
<head>
    <title>test</title>
</head>
<body>
    <div style="color:black;">
        <div style="color:blue;">abc</div>
        <div>Xyz</div>
        1111
    </div>
</body>
</html>
<script type="text/javascript">
allstyle = "";
classNames = "";
count = 1;
$("*").each(function() {
  tag = $(this);
  $.each(this.attributes, function() {
    if(this.name == 'style'){
        allstyle += this.value;
        tag.removeAttr("style");
        tag.addClass("custom-class"+count);
        classNames +=" .custom-class"+count+"{"+allstyle+"}";
        count++;
    }
  });
});

$("<style>").html(classNames).appendTo("head");
</script>

如何使用jQuery将动态类转换为所有内联样式css？

2 个答案: