Resolve class attribute with style definition

Question

I will be specific:

How do I replace

<style type="text/css">
   .class1 {font-weight:bold; font-size:10pt;}
   .class2 {font-weight:bold; font-size:12pt;}
   ...
   .classN {font-weight:bold; font-size:8pt; vertical-align:sub;}
</style>

<div class="class2" style="color:blue;">
   Bold Text
</div>

With this:

<div style="color:blue; font-weight:bold; font-size:12pt;">
   Bold Text
</div>

**Note that - node could be any node - attributes order doesn't care. - class attribute don't need to be stripped

There is any HTML method (C#) to do that? Regex? Any ideas?

Thanks in advance!

You want to remove style rules from a style block and move them inline? And you want to do this at runtime? — steveax, Apr 13 '12 at 16:20
i think you are defeating the whole purpose of having a style in the first place. why dont you let the browser take care of that for you — Ibu, Apr 13 '12 at 16:25
Cause isn't the browser who works with it, is a WYSIWYG application and it converts data from html (from clipboard) to XML structure without resolve class attributes. — stevenpacho, Apr 13 '12 at 16:29
I don't understand why you'd want to do that, particularly since you say the class attribute doesn't need to be stripped. Why not just modify the stylesheet to be .class1, .class2, .class3, .... .classN {color:blue, font-weight:bold; font-size: 12pt;} and let the styles do their job? ...AH, we answered at same time, sorry about that — HMartch, Apr 13 '12 at 16:30
"class attribute doesn't need to be stripped" means i don't care about this attribute right now :p — stevenpacho, Apr 13 '12 at 16:32

Oswaldo Acauan · Accepted Answer · 2013-12-16T13:35:29.290

If you are using jquery, you can use this plugin:

/*
 * getStyleObject Plugin for jQuery JavaScript Library
 * From: http://upshots.org/?p=112
 *
 * Copyright: Unknown, see source link
 * Plugin version by Dakota Schneider (http://hackthetruth.org)
 */

(function($){
    $.fn.getStyleObject = function(){
        var dom = this.get(0);
        var style;
        var returns = {};
        if(window.getComputedStyle){
            var camelize = function(a,b){
                return b.toUpperCase();
            }
            style = window.getComputedStyle(dom, null);
            for(var i=0;i<style.length;i++){
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            }
            return returns;
        }
        if(dom.currentStyle){
            style = dom.currentStyle;
            for(var prop in style){
                returns[prop] = style[prop];
            }
            return returns;
        }
        return this.css();
    }
})(jQuery);

and try something like this

<div class="class2" style="color:blue;">
   Bold Text
</div>
<script type="text/javascript">
  var computedStyle;
  $("div[class^='class']").each(function(){
    computedStyle = $(this).getStyleObject();
    $(this).css(computedStyle);
    $(this).attr('class','');
  });
</script>

OK, i found a similiar question that resolves my problem in c# Thanks everyone! [][1] [1]: http://stackoverflow.com/questions/3679213/inlining-css-in-c-sharp — stevenpacho, Apr 13 '12 at 17:01

score 0 · Answer 2 · answered Apr 13 '12 at 16:37

0

Use this tool to convert your HTML/CSS into inline CSS.=

http://inlinestyler.torchboxapps.com

Only use this if you have to, for example styling HTML based emails etc.

answered Apr 13 '12 at 16:37

Samwise

306
6
24

Resolve class attribute with style definition

2 Answers2