Como adicionar uma Stylesheet utilizando Javascript

Post ensinando a como adicionar uma Stylesheet (folha de estilo / css) no Head utilizando apenas Javascript.

Para isso vamos utilizar a seguinte função:

function adicionarCss(nome) {

  var place = document.head, link = document.createElement('link')

  link.type = 'text/css'
  link.rel = 'stylesheet'
  link.href = nome

  place.appendChild(link)
}

adicionarCss('http://exemplo.com.br/style.css')

A função acima irá utilizar método nativo “appendChild” para adicionar antes do final da tag “head” a nossa folha de estilo.

Caso você queira adicionar na tag “body” por exemplo, altere:

var place = document.head

Para:

var place = document.body

jQuery

Caso você esteja utilizando a biblioteca jQuery no seu projeto você pode utilizar a seguinte função:

function adicionarCss(name) {
   var link = '<link rel="stylesheet" type="text/css" href="' + name+ '">'
   $('head').append(link)
}

adicionarCss('http://exemplo.com.br/style.css');