Develop Reference

How to convert a HTMLElement to a string putting all css in style tag using jQuery

Is it possible to convert a HTMLElement to a string putting all css styles (including the ones created dynamically with javascript) in style tags?

You can get this by accessing the outerHTML property
$("your element selector").prop("outerHTML");
This will return a string value of the object with any inline styling included.
This won't include styling included in separate css files. If this is something you do need then I would recommend looking at this and this previous question.

Getting the styles is not really an options there are css rules, inline styles and user agent styles that affects the actual look too.
You can always use jQuery css() method to get the calculated values of an element: ref css()
$(ele).css('height'); //Most of common properties are supported
But that will not do the work you are after.
I will save it as an image using rasterizeHTML.js and I need element looks exactly as in browser.
If that is your goal I can suggest you use other methods and libraries that already does a good job: html2canvas
in html2canvas the results are pretty accurate and the major limit is with images - but there are several methods to overcome that such as using the images as backgrounds.
Hope I helped.

Use part of class name as a css variable

I'm using css to change the sizes of two divs so that their size represents some value that changes a few times per session.
Is there anyway to define a css class something like:
.shiftydiv(*) {
width:\1;
}
where \1 is whatever * matched? Then I can just add a class like .shiftydiv25 via jquery whenever I need to change the size.
I don't need legacy support for browsers and I'd prefer not adding any dependencies.
If I can't do it with pure css I'll either create CSS classes dynamically or inject style= attributes into my code. Which would be better (less bad).
EDIT:
If there is a nice way to do this with JS/jquery that would work well too.
EDIT 2:
So doing this with js is actually quite easy. oops

Maybe instead pure CSS use SASS/LESS and generate multiple classes?
You can use for loop and iterate over lets say 20 elements and make .shiftydiv1, shiftydiv2, ... shiftydiv20.

Changing CSS with JavaScript

When using JavaScript to change the CSS does the JavaScript simply make new inline-CSS which takes presidents? I've always felt inline CSS is trashy and was wondering if there's a better way?
For example if you have
<div id="author">Author's name</div> which is normally coloured green from a reference to an external CSS and you want to change it to red must you use
document.getElementById('author').style.color='#FF0000'
Must changes to appearance be done using inline-stying?

No, you're not modifiying the CSS. You're just setting style properties. The mark up of an element is decided by three things: CSS, style and inline properties like width="100". The order in which they are applied can get a little fuzzy.
style does always overrule CSS though, unless you're using !important.
A more common way to change the mark up of elements is to add and remove classes. This allows you to keep all your style definitions in your CSS file and makes your code considerably less complex.
You could do:
document.getElementById('author').className = "selected";
to add a class to it and have it be display in a different mark up.
If you're using jQuery you can use addClass and removeClass. Under the hood this just modifies the className property. It's easy enough to write your own implementation, you just need to do some string juggling.

There is more than one way to change the styling of an HTML element. If using jQuery, for instance, you can add/remove class names to elements easily, like so:
$("div").addClass("className");

It is always cleaner to define all your styles in classes so you can change the whole application look and feel easily instead of using inline styles.
the easiest way to do so is to define a CSS class
.reddiv {color: #FF0000}
then you can easily change the color of the div to red using jquery
$('#author').addClass('reddiv');

Is it possible to assign data attributes using CSS?

Could I add data attributes to an element via it's CSS?
.myClass{
/* assign data attribute here */
}

CSS is for presentation not data(manipulating markup).

No, it is not possible. You'd have to use something else, like javascript.

No, that is not what CSS should be used for.
The idea of CSS is precisely to be all about the presentation and not at all about the data.
What you may do, if you have to, is to have different possible values in different elements, and change by CSS which element is visible.

Overriding containers CSS behavior

I have created a Javascript based element that can be embedded into websites. The Javascript itself adds the HTML code into a pre-defined HTML container and dynamically loads the necessary CSS file that contain the element's visual definitions.
The problem starts when the site itself has its own definitions for general items. For example: The site's CSS defines a certain list style which is applied on the element's list because the element's CSS doesn't define an explicit list style or if the site's CSS overrides the element's CSS definition.
For the time being, I was able to solve this specific issue by explicitly defining the list's style and adding the !important definition. However, I would definitely want to go for a more robust solution that will assure that:
1. CSS definitions from the site's CSS that are not explicitly defined in the element's CSS will not be applied on the element
2. I will not need to explicitly add the !important definition to every one of my CSS definitions
Is there a general way in which I can specify that a site's CSS will not be applied on a certain element or that only a certain CSS will be applied to a specific element?
Any help will be greatly appreciated.

You need to use a localised reset.
Grab an existing CSS reset, such as Eric Meyer's Reset Reloaded and namespace all the selectors with your parent element, e.g. #something a { ... }.

I was going to put up the same answer as Alex, but he beat me - but I was also going to add:
If you're not going to use #alex's suggestion then ultimately you have to explicitly style all of your elements the way that you want them to appear; using selectors that keep your styles local too (and don't interfere with the parent site) - in the same way that the localised reset is suggested.
Update
Or you could do what Google Translate and many other widget-type things do, usually a no-no but in dynamic scenarios I think perfectly acceptable; since the visual style of your elements is not just important to you but to the container site: use inline styles.
Final update
So I thought I'd just double check what Google Translate does. And of course it's an iFrame inject in addition to using inline styles. They no doubt use inline styles to maximise compatibility and so that the browser doesn't have to make another request to get the stylesheet; and they would be using an iFrame so they can ensure a consistent look and feel.
Consider both of those points in tandem - and weigh that up against the amount of work that might be required in resettting all the styles for a minority portion of the page; or defining rules for every CSS property you need to control - which, let's face it, is basically all visual CSS properties.
The iFrame solution actually seems to offer the best solution - if you can use it; hence I've +1'd the first comment by #roberkules on your question.