Jqueryで外部CSS (スタイルシート) を切替できない

<a class="header-mains-css-black">タグをクりックした際に、背景色が変更するイベントを実装しています．
しかし，<a>タグをクリックしても背景色が変更しない状況です．

該当のソースコード

html
1<head>
2  <link rel="stylesheet" href="style.css">
3</head>
4<body>
5　　<div class="header-mains-css">
6        <p>文字
7          <br>
8           サイズ
9        </p>
10        <a href="#">拡大</a>
11        <a href="#">標準</a>
12        <p >背景変更</p>
13        <a class="header-mains-css-black" href="#">黒</a>
14        <a class="header-mains-css-white" href="#">白</a>
15      </div>
16</body>

css
1/*kuro.css*/
2
3　　body{
4  background-color: black;
5  color: white;
6 }

jquery
1$(function(){
2　　$('.header-mains-css-black').on('click',function(){
3      var link_style = $('<link>').attr({
4        'rel': 'stylesheet',
5        'href': 'kuro.css'
6      });
7      $('body').append(link_style);
8 });
9});

試したこと

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

linkタグをbodyに付け足したところで読み込まれないのではないでしょうか。

以下のようにして切り替えてはどうでしょう。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>sample</title>
6  <link rel="stylesheet" href="shiro.css" id="white-style">
7  <link rel="stylesheet" href="kuro.css" id="black-style">
8</head>
9<body>
10  <div class="header-mains-css">
11    <p>文字
12      <br>
13      サイズ
14    </p>
15    <a href="#">拡大</a>
16    <a href="#">標準</a>
17    <p>背景変更</p>
18    <a class="header-mains-css-black" href="#">黒</a>
19    <a class="header-mains-css-white" href="#">白</a>
20  </div>
21  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
22  <script>
23    $(function(){
24
25      $('#white-style').prop('disabled', false);
26      $('#black-style').prop('disabled', true);
27
28      $('.header-mains-css-black').on('click',function(){
29        $('#white-style').prop('disabled', true);
30        $('#black-style').prop('disabled', false);
31      });
32
33      $('.header-mains-css-white').on('click',function(){
34        $('#white-style').prop('disabled', false);
35        $('#black-style').prop('disabled', true);
36      });
37
38    });
39    </script>
40</body>
41</html>
42