style load with javascript

js-style-load.md

Inline CSS

// function scope for moduling
!function() {
  var style = document.createElement('style');
  
  style.innerText = '::-webkit-scrollbar { width: 8px; }';
  document.getElementsByTagName('head')[0].appendChild(style);
}();

Inline CSS With Template literals (Backtick `)

// function scope for moduling
!function() {
  var style = document.createElement('style');
  
  style.innerText = 
  `
    ::-webkit-scrollbar { 
      width: 8px; 
    }
    ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.2); 
      border-radius: 2px;
    }

    ::-webkit-scrollbar-thumb {
      border-radius: 4px;
      -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.2); 
    }
  `;
  document.getElementsByTagName('head')[0].appendChild(style);
}();

ES2015 스펙 중 Template literals 를 이용하면 code 의 indent 나 줄바꿈을 유지한채로 작성할 수 있습니다.

참고

• ES6 Support in Chromium
• ECMAScript 6 Compatibility table

Remote CSS file

// function scope for moduling
!function() {
  var link = document.createElement('link');
  
  link.rel  = 'stylesheet';
  link.type = 'text/css';
  link.href = 'http://example.com/css/stylesheet.css';
  
  document.getElementsByTagName('head')[0].appendChild(link);
}();