Develop Reference

script that applies a style to newly created elements

I am writing a tampermonkey script that changes the style of an element whose class starts with "blocked". So i have this code:
var blockedelements = document.querySelectorAll("[class^=blocked]");
var element = blockedelements[0];
element.style.display="none";
for simplicity this is only for the first element but i know how to iterate through each one and this code as it is works. the webapp dynamically creates new elements with this class and i want the script to execute for each newly created element which is what i don't know how to do. I want a pure JS solution, not jquery. Is this what a listener is for? i don't know much about javascript.
I would appreciate any pointers, thanks

Instead of manually changing the display value for every instance of the element, you could use JavaScript to add a page-wide style rule to hide all of them. That way you can let the browser handle applying the rule to both existing and future instances of the element for you.
Rough idea:
var rule = "[class^=blocked] { display: none }";
var styleElement = document.createElement("style");
styleElement.type = "text/css";
if (styleElement.style.cssText) {
styleElement.style.cssText = rule;
} else {
styleElement.appendChild(document.createTextNode(rule));
}
document.getElementsByTagName("head")[0].appendChild(styleElement);

Final cross browser way to dynamically insert style elements into the DOM

Although inserting style nodes into the DOM sounds rather trivial, I have found many contradictory ways to do so. So I decided to look it up on stackoverflow and it appears that many posts offer methodologies that do what I need, however they do not necessarily agree with each other.
I came across the following javascript methods:
Returns a style element, and apparently does not have the "styleSheet" property in older browsers.
document.createElement("style")
Returns a styleSheet object, although I do not know how you would subsequently access the style element (which you will need to insert into the DOM).
document.createStyleElement()
The first three methods below work on styleSheets, others are "hacks" that work directly on the style nodes.
styleSheet.cssText
styleSheet.addRule
styleSheet.insertRule
style.createTextNode
style.innerHTML
I also had a hard time finding the correct syntax to use on (at least) the first three styleSheet methods. E.g. whether or not it is mandatory to include the curly braces and semicolons.
Also, these properties are used for accessing a styleSheet in various browsers:
document.styleSheets[index]
element.styleSheet
element.sheet
What would be the correct bundle of methods to use for a cross browser approach on inserting style elements? This should cover older browsers like IE6, subselectors (such as :visited) and !important statements.

Processed from this question:
var css = 'h1 { background: red; }',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet)
style.styleSheet.cssText = css;
else
style.appendChild(document.createTextNode(css));
head.appendChild(style);
It says it was tested in IE 7-9, Firefox, Opera, and Chrome, so it's pretty compatible.
And here are two links that might help:
Dynamic style - manipulating CSS with JavaScript - W3C Wiki
W3C DOM Compatibility - CSS

My proposal:
var elem = document.createElement('style');
elem.innerHTML = 'body { background: green }';
document.body.appendChild(elem);
Live demo: http://jsfiddle.net/simevidas/bhX86/
I'm looking into how to make this work in IE8.

You mean something like this? This should be cross-browser.
HTML
<div id="target">text</div>
Javascript
function injectStyle(data, attributes, inBody) {
attributes = attributes || {};
inBody = inBody || false;
var inject = document.createElement("style"),
i;
inject.type = "text/css";
for (i in attributes) {
if (attributes.hasOwnProperty(i)) {
inject[i] = attributes[i];
}
}
inject.appendChild(document.createTextNode(data));
if (inBody) {
return document.body.appendChild(inject);
}
return (document.head || document.getElementsByTagName("head")[0] || document.documentElement).appendChild(inject);
}
injectStyle("#target { border-style: solid; border-width: 5px; }", {
id: "injectedStyle"
});
on jsfiddle

How to dynamically set and modify CSS in JavaScript?

I have some JavaScript code that creates some div elements and it sets their CSS properties.
Because I would like to decouple CSS logic from my JavaScript code and because CSS is easier to read in its own .css file, I would like to set the CSS className of my element and then dynamically inject some values into the defined CSS property.
Here is what I would like to do :
style.css:
.myClass {
width: $insertedFromJS
}
script.js:
var myElement = document.createElement("div");
myElement.className = "myClass";
I want to do something like this but at that point myElement.style.width is empty
myElement.style.width.replaceAll("$insertedFromJS", "400px");
I think my problem here is that after the call to myElement.className = "myClass", the CSS is not yet applied.

If I understand your question properly, it sounds like you're trying to set placeholder text in your css file, and then use javascript to parse out the text with the css value you want to set for that class. You can't do that in the way you're trying to do it. In order to do that, you'd have to grab the content of the CSS file out of the dom, manipulate the text, and then save it back to the DOM. But that's a really overly-complicated way to go about doing something that...
myElement.style.width = "400px";
...can do for you in a couple of seconds. I know it doesn't really address the issue of decoupling css from js, but there's not really a whole lot you can do about that. You're trying to set css dynamically, after all.
Depending on what you're trying to accomplish, you might want to try defining multiple classes and just changing the className property in your js.

Setting the style, might be accomplished defining the inner-page style declaration.
Here is what i mean
var style = document.createElement('style');
style.type = 'text/css';
style.cssText = '.cssClass { color: #F00; }';
document.getElementsByTagName('head')[0].appendChild(style);
document.getElementById('someElementId').className = 'cssClass';
However the part of modifying it can be a lot of tricky than you think. Some regex solutions might do a good job. But here is another way, I found.
if (!document.styleSheets) return;
var csses = new Array();
if (document.styleSheets[0].cssRules) // Standards Compliant {
csses = document.styleSheets[0].cssRules;
}
else {
csses = document.styleSheets[0].rules; // IE
}
for (i=0;i<csses.length;i++) {
if ((csses[i].selectorText.toLowerCase()=='.cssClass') || (thecss[i].selectorText.toLowerCase()=='.borders'))
{
thecss[i].style.cssText="color:#000";
}
}

could you use jQuery on this? You could use
$(".class").css("property", val); /* or use the .width property */

There is a jQuery plugin called jQuery Rule,
http://flesler.blogspot.com/2007/11/jqueryrule.html
I tried it to dynamically set some div sizes of a board game. It works in FireFox, not in Chrome. I didn't try IE9.

lightweight dialog plugin that doesn't require css

I'm looking for a lightweight dialog plugin that doesn't require css.
I need it for a userscript, which means I can't include a css file
Any ideas?

You could dynamically inject a css file from a remote domain, which is what disqus does, for example.
var link = document.createElement('link')
link.rel = 'stylesheet'
link.href = 'http://yourhost.com/your.css'
You'd make to make sure your css has low chance of clashing with your user site's styles by restricting the styles using id or class names.

you can simply set the innerHTML of a style tag created via javascript. In this way you obtain an inlined stylesheet.
E.g.
var styleText = "body { background-color: red } div { color: lime }";
var styleBlock = document.createElement("style");
styleBlock.innerHTML = styleText;
document.head.appendChild(styleBlock);
Another idea is to use a dataURI of a css file:
E.g.
var linkEl = document.createElement("link");
linkEl.href = "data:text/css;base64,Ym9keSB7IGJhY2tncm91bmQtY29sb3I6YmxhY2sgfQo=";
linkEl.rel = "stylesheet";
linkEl.type = "text/css";
document.head.appendChild(linkEl);

Adding #import statement in a dynamic stylesheet for IE7+

I have a problem with adding a dynamic style element with #import statements for IE. Try this:
var string = '#import url(test.css)';
var style = document.createElement('style');
if (style.styleSheet) { // IE
style.styleSheet.cssText = string;
} else {
var cssText = document.createTextNode(string);
style.appendChild(cssText);
}
document.getElementsByTagName('head')[0].appendChild(style);
This works for FF/Chrome but not IE. It seems to recognize style.styleSheets.imports, but it will not apply the imported stylesheet. Is this a bug or limitation?

Many older browsers can't process varying forms of the #import directive, this can be used to hide css from them. Check http://www.w3development.de/css/hide_css_from_browsers/import/ for details.
The #import directives must come first in a style sheet, or else they'll be ignored. however IE doesn't ignore misplaced #import directives.
Edit: See the addImport method for injecting style sheets in IE.