使用javascript将外部和内部样式转换为嵌入式样式

Question

In order to make html content with styles more portable, I need to convert all external styles ( <link> importing external .css) and internal styles (defined with <style> s) into the inline styles of the elements.

For example, if I have:

<link rel="stylesheet" href="common.css">
<style>
.alert { color: red; font-weight: bold; }
</style>

<div id="foo" class="special alert" style="font-size: 2em;">something</div>

and a common.css with:

.special { border: 1px solid dotted; }

I want a result like:

<div id="foo" class="special alert" style="border: 1px solid dotted; color: red; font-weight: bold; font-size: 2em;">something</div>

Currently the problem is how to get all external and internal styles that are applied to the div[#foo]?

Answer 1

How many CSS properties do you have? if not so many, you can do something like $("#foo").css("border", "1px");

if there are a lot of CSS files, its always not suggested do inline style