javascriptを使用してcssの読み込みについて

画像を選択すると「背景・文字」が同時に変わる機能を作成しています。

外部CSSを使用して動作させようとしていますが、画像を選択してもCSSが読み込まなくなってしまいます。
対応方法教えて下さい。宜しくお願いします。

javascript


window.onload = function(){
document.getElementById("setButton1").onclick = function(){
document.getElementById("cssMain").href = "style.css";
}
document.getElementById("setButton2").onclick = function(){
document.getElementById("cssMain").href = "blue.css";
}
}

HTML

<head>
<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css" id="cssMain">

対象(HTML)

<input type="button" id="setButton1" value="main.cssに"><br>
<input type="button" id="setButton2" value="blue.cssに">

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

回答3件

画像を選択すると「背景・文字」が同時に変わる機能を作成しています。

「テーマを切り替える」と同じテクニックで行けるでしょう。
全てのCSSファイルを「クラス分け」した状態で読み込んでおき、
JavaScriptで要素のクラス名を変更することで実現するのが一般的です。

HTML
1<section id="cssMain" class="basic">
2  <p class="name">私は太郎です。</p>
3</section>

CSS
1.basic {
2  background-color: #FFF;
3  color: #444;
4}
5.reverse {
6  background-color: #444;
7  color: #444;
8}

JSのクラス名の変更は下記のサイトを参考にしましょう。
https://developer.mozilla.org/ja/docs/Web/API/Element/classList

JavaScript
1window.onload = function(){
2  var cssMain = document.getElementById("cssMain");
3  document.getElementById("setButton1").onclick = function(){
4    cssMain.classList.add("basic");
5    cssMain.classList.remove("reverse");
6  }
7  document.getElementById("setButton2").onclick = function(){
8    cssMain.classList.add("reverse");
9    cssMain.classList.remove("basic");
10  }
11}

ざっと書きましたがこんな感じです。
未検証なので一度確認してみてくださいね。

投稿2018/09/17 03:13

miyabi-sun

総合スコア21158

ベストアンサー

<link rel="stylesheet" type="text/css" href="css/style.css" id="cssMain">

デフォルトではcss/style.cssを見ているので、単純にURLを間違っているだけでは？
×　document.getElementById("cssMain").href = "blue.css";
○　document.getElementById("cssMain").href = "css/blue.css";

投稿2018/09/17 03:05