Create CSS Style Sheet Using Javascript

Question

I'm trying to create a CSS Style Sheet using javascript. The code is:

<script type="text/javascript">
function colorSquare()
{
 var elem = document.getElementById("body");
 document.getElementById("body").innerHTML = "<style>";
 document.getElementById("body").innerHTML += ".myAnimation";
 document.getElementById("body").innerHTML += "{";
 document.getElementById("body").innerHTML += "width: 50px";
 document.getElementById("body").innerHTML += "height: 50px";
 document.getElementById("body").innerHTML += "position: absolute;";
 document.getElementById("body").innerHTML += "background: #0000FF;";
 document.getElementById("body").innerHTML += "background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FmZTBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzNjQ1NGYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvcmFkaWFsR3JhZGllbnQ+CiAgPHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=)"
 document.getElementById("body").innerHTML += "background: -moz-radial-gradient(center, ellipse cover,  #0000FF 0%, #0000FF 0%, #ff0000 100%);";
 document.getElementById("body").innerHTML += "background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#0000FF), color-stop(0%,#ff0000), color-stop(100%,#ff0000));";
 document.getElementById("body").innerHTML += "background: -webkit-radial-gradient(center, ellipse cover,  #0000FF 0%,#0000FF 0%,#ff0000 100%);";
 document.getElementById("body").innerHTML += "background: -o-radial-gradient(center, ellipse cover,  #0000FF 0%,#0000FF 0%,#ff0000 100%);";
 document.getElementById("body").innerHTML += "background: -ms-radial-gradient(center, ellipse cover,  #0000FF 0%,#0000FF 0%,#ff0000 100%);";
 document.getElementById("body").innerHTML += "background: radial-gradient(ellipse at center,  #0000FF 0%,#0000FF 0%,#ff0000 100%)";
 document.getElementById("body").innerHTML += "filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000FF', endColorstr='#ff0000',GradientType=1 );";
 document.getElementById("body").innerHTML += "border-style: solid;";
 document.getElementById("body").innerHTML += "border-width: 3px;";
 document.getElementById("body").innerHTML += "border-color:#77dd77;";
 document.getElementById("body").innerHTML += "border-radius: 5px;";
 document.getElementById("body").innerHTML += "-webkit-box-shadow:0 0 10px black;";
 document.getElementById("body").innerHTML += "-moz-box-shadow: 0 0 10px black;";
 document.getElementById("body").innerHTML += "box-shadow:0 0 10px black;";
 document.getElementById("body").innerHTML += "text-align: white;";
 document.getElementById("body").innerHTML += "text-align: center;";
 document.getElementById("body").innerHTML += "line-height: 45px;";
 document.getElementById("body").innerHTML += "</style>}";

}
</script>

Am I doing this right? If not what is the proper way of using javascript to create a CSS Style Sheet.

Thanks,

Isaiah

Answer 1

Even though your code may work (not sure without testing) it looks messy..and you should be putting the css in the head really.

you could do something like this .. you can add as many styles as you want to your newCSS variable, meaning the code will look a lot nicer to the eye but also function a lot better with less lines of code.

// add your styles here
var newCSS = '.myAnimation { width: 50px; }';
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet){
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

head.appendChild(style);

Answer 2

YOu can use aphrodite. It's an inline stylesheet library created for React but doesn't require React.

Answer 3

I would say you are doing it incorrectly. What you are doing now is to use JavaScript to create a <style> element in your HTML and then append text to it to change the style of your HTML-elements, instead of styling them directly with JavaScript.

The elements have an attribute called style which you can fetch with JavaScript.

Style an element with regard to id:

If you have an element with an id of home, and you want to set its background-color to red, you would do it like this:

document.getElementById("home").style.backgroundColor = "red";

Style elements with regard to tag:

Instead of using getElementById you will use getElementsByTagName which returns an array of elements.

If you want the fifth <p> to have the color blue, you would do it like this:

document.getElementsByTagName("p")[4].style.color = "blue";

If you want to do that to every <p> you can simply put it in a loop:

var a = document.getElementsByTagName("p");
for(var i = 0; i < a.length; i++) {
    a[i].style.color = "blue";
}

Style elements with regard to class:

Exactly the same as above, but instead of getElementsByTagName you use getElementsByClassName.

Example: document.getElementsByClassName("slogan")[0].innerHTML = "hello";

Side notes:

Writing document.getElementById and the others over and over again gets very repetitive. You can create method aliases for them - something like this:

function tag(string) {
    return document.getElementsByTagName(string);
}

function c(string) { 
    return document.getElementsByClassName(string);
}

function id(string) {
    return document.getElementById(string);
}

and write like this instead:

id("home").style.backgroundColor = "red";

tag("p")[4].style.color = "blue";

c("slogan")[0].innerHTML = "hello";