在网页开发中，我们经常需要使用JavaScript来动态地加载CSS样式，这样做的好处是可以根据用户的操作或者页面的状态来动态改变页面的样式，提高用户体验，本文将介绍几种常用的JavaScript加载CSS的方法。

1、内联样式

最简单的方式就是直接在HTML元素中使用style属性来设置CSS样式，这种方式的缺点是如果需要修改样式，需要在每个元素中都进行修改，不利于代码的复用和维护。

<div id="myDiv" style="color: red;">这是一个红色的div</div>

2、内部样式表

内部样式表是将CSS样式写在HTML文档的<head>标签内的<style>标签中，这种方式的优点是可以在一个位置集中管理所有的样式，但是同样存在修改样式需要修改多个地方的问题。

<head>
    <style>
        #myDiv {
            color: red;
        }
    </style>
</head>
<body>
    <div id="myDiv">这是一个红色的div</div>
</body>

3、外部样式表

外部样式表是将CSS样式写在一个单独的.css文件中，然后在HTML文档的<head>标签内使用<link>标签来链接这个.css文件，这种方式的优点是可以将样式和内容分离，提高代码的可读性和可维护性。

<head>
    <link rel="stylesheet" type="text/css" href="myStyle.css">
</head>
<body>
    <div id="myDiv">这是一个红色的div</div>
</body>

4、JavaScript加载CSS

JavaScript可以通过创建一个新的<link>标签，然后将其添加到<head>标签内来动态加载CSS，这种方式的优点是可以动态地改变页面的样式，提高用户体验。

var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'myStyle.css';
document.getElementsByTagName('head')[0].appendChild(link);

5、JavaScript修改内联样式和内部样式表的样式

JavaScript可以通过操作元素的style属性或者<style>标签内的CSS规则来动态修改样式，这种方式的优点是可以直接修改元素的样式，不需要额外的HTTP请求，如果需要修改的样式很多，这种方式可能会使代码变得复杂和难以维护。

document.getElementById('myDiv').style.color = 'blue';

或者

var style = document.createElement('style');
style.innerHTML = '#myDiv { color: blue; }';
document.getElementsByTagName('head')[0].appendChild(style);

以上就是JavaScript加载CSS的几种常用方法，在实际开发中，我们需要根据实际需求和项目的规模来选择合适的方法。