在前端Web开发中，JavaScript与CSS的配合是必不可少的。其中，在JavaScript中加载CSS样式表，可以改变Web页面的外观，提高用户体验。下面我们来详细讨论JavaScript如何加载CSS样式表。

JavaScript中加载CSS样式表的方式有两种，一种是通过创建link元素实现CSS的加载，另一种是通过JavaScript编写CSS，并通过调用DOM API来实现CSS样式表的加载。下面分别进行说明。

第一种方式：通过创建link元素实现CSS的加载。

function loadCSS(href) {var link = document.createElement('link');link.href = href;link.type = 'text/css';link.rel = 'stylesheet';document.head.appendChild(link);}

如上代码所示，我们创建了一个函数loadCSS用于加载CSS样式表，并通过document.head.appendChild(link)将link元素添加到DOM中，从而完成CSS样式表的加载。调用loadCSS函数，可以通过传入需要加载的CSS文件路径来实现CSS的动态加载。

第二种方式：通过JavaScript编写CSS，并通过调用DOM API来实现CSS样式表的加载。

function loadDynamicCSS(styles) {var styleElement = document.createElement('style');styleElement.type = 'text/css';if (styleElement.styleSheet) {styleElement.styleSheet.cssText = styles;} else {styleElement.appendChild(document.createTextNode(styles));}document.head.appendChild(styleElement);}

如上代码所示，我们创建了一个函数loadDynamicCSS用于编写CSS样式，并将其加载到DOM中。loadDynamicCSS函数通过document.createTextNode创建Text节点，并通过appendChild方法将节点添加到styleElement元素中，从而完成CSS样式表的动态加载。调用loadDynamicCSS函数，可以通过传入需要动态编写的CSS代码来实现CSS的动态加载。

最后值得注意的是，在使用JavaScript加载CSS样式表时，由于样式表是被动态加载的，所以必须考虑到样式表是否已经加载完毕才能执行与CSS有关的操作。在实际开发中，可以通过回调函数等方式来实现CSS加载后执行相关操作。

本文就javascript加载css的几种方式进行了详细的说明。通过JavaScript动态加载CSS样式表，可以极大程度的改善页面的外观和用户体验，提高Web程序的交互性和美观性，希望对您有所帮助。