Skip to content

Instantly share code, notes, and snippets.

@codemilli
Last active February 23, 2017 11:44
Show Gist options
  • Save codemilli/cfee8090de9b1e50c0bcc9e6cfaa6a46 to your computer and use it in GitHub Desktop.
Save codemilli/cfee8090de9b1e50c0bcc9e6cfaa6a46 to your computer and use it in GitHub Desktop.
style load with javascript

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 나 줄바꿈을 유지한채로 작성할 수 있습니다.

참고

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);
}();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment