Загрузка скрипта в javascript

Question

Я работаю над одним требованием, когда мне нужно загрузить скрипт и таблицу стилей внутри javascript файла.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

Как я могу загрузить их в свой javascript файл.

Answer 1

Вы можете легко создавать функции для добавления элементов скрипта / ссылки в заголовок документа.

const documentHead = () => {
  return document.getElementsByTagName('head').item(0) ||
      document.documentElement
}

const loadJavaScript = (src) => {
  let script = document.createElement('script')
  script.setAttribute('src', src)
  documentHead().appendChild(script)
} 

const loadCSS = (href) => {
  let stylesheet = document.createElement('link')
  stylesheet.setAttribute('rel', 'stylesheet')
  stylesheet.setAttribute('href', href)
  documentHead().appendChild(stylesheet)
} 

const loadExternal = (path) => {
  let [filename] = path.split(/[\\\/]/g).slice(-1)
  let [extension] = filename.split(/\./g).slice(-1)
  switch (extension) {
    case 'js'  : loadJavaScript(path) ; break
    case 'css' : loadCSS(path)        ; break
  }
} 

loadExternal('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js')
loadExternal('https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css')

Answer 2

Я бы порекомендовал вам использовать jQuery, так как он намного проще в использовании, чем обычный JavaScript.

Но если вы хотите добавить коды css в файл javascript, вы можете попробовать:

$("#id").css("param","prop");

Пример:

$("#id").css("color","red");

О ссылке на внешний файл CSS? Попробуйте @Mr. Решение Polywhirl.

Надеюсь, это поможет ..