将内部样式表转换为内联css

时间:2013-12-10 05:32:29

标签: css

如何在不使用任何在线资源的情况下将内部样式表转换为页面的内联css。 我将样式定义为

<style  id="custstyle" type="text/css">
            .column{
                font-size:13px;
                font-family:arial, helvetica, verdana, sans-serif;
                font-weight:normal;
                color:rgb(221, 221, 221);
                font-size:13px;
                font-family:arial, helvetica, verdana, sans-serif;
                font-weight:normal;
                color:rgb(221, 221, 221);
            }
        </style> 

这为

设置了样式
<div id="sidebar-right" class="column">Content</div>

但我想将所有内部css自动转换为内联css

3 个答案:

答案 0 :(得分:1)

你能详细介绍一下你想要完成的事情吗?

你可能会做类似

的事情
$('#sidebar-right').attr('style',$(.custstyle).text().split('{')[1].replace('}',''))

由于样式遵循相同的格式,但这似乎是一件相当愚蠢的事情。也许如果你告诉我们你想要实现的目标,我们可以提供更多的帮助。

答案 1 :(得分:1)

此脚本将为您提供计算出的CSS,在病房之后,您可以使用jquery .css()或纯js .setAttribute("style","calculated_value");

设置属性

http://jsfiddle.net/prollygeek/twP6S/112/

 $(document).ready(function()
                  {
xx=window.getComputedStyle(document.getElementById('stylediv')).cssText
document.getElementById('stylediv').setAttribute("style",xx)

                  });

这将回答你的问题,但关于邮件,我不知道,需要进一步的调查!!

答案 2 :(得分:1)

选择具有column类的所有div,如果存在则删除class列,然后使用jquery应用内联CSS。

$(document).ready(function(){
var obj = $(".column");
$(obj).each(function(){
    $(this).removeClass("column");//not really necessary
    $(this).css({"font-size":"13px","font-family":"arial,helvetica, verdana, sans-serif",          
            "font-weight":"normal",
            "color":"rgb(221, 221, 221)",
            "font-weight":"normal"});
});
});

<强> Working Fiddle