onclickボタンイベントを使ってCSSスタイルを適用しようとしています。

Question

これは初めてのことですので、私と一緒にお立ち寄りください。

私は現在、WebデザインやWeb開発を学んでいます、と私はhttp//.www.ahandbuilt.website

（はい、私はそれが混乱に見えるけど、私はまだ学んでいる時に学んだことを証明する手段としてウェブサイトを作成しました

ホームページには、ページの変更をオンクリックするための3つのボタンが表示されます。

最初の2つのボタンは、ページの外観にCSSの効果を表示する手段として、CSSスタイリングが適用されているか、CSSスタイリングが適用されているホームページを表示できるように設計されています。私のHTMLドキュメントのヘッドで

、私は次のようにCSSのリンクタグを持っている：

<link rel="stylesheet" href=""> 

をし、だから、スタイルシートと題しhandbuilt.css

を持って、ページがどのスタイリングなしで開きますが、適切なボタンをクリックすると、CSSのリンクのhref値を更新する必要があります：

<link rel="stylesheet" href="handbuilt.css"> 

とその逆。

問題は、ボタンがリンク内のhrefを変更していないことです。私はどんな指針にも感謝しています。私は完全な答えの後ではありません - 私が間違っているところについてのポインタです。

サイトのルール私は、まっすぐなコードで動作することができ、フレームワークではないことを意味しています。現時点での私の能力は、私がHTMLで快適に働いていることを意味します.CSSでOKで、JavaScriptで苦労しています。

アドバイスや説明をいただければ幸いです。

Answer 1

アドバイスや説明をいただければ幸いです。

は、お使いのブラウザでdeveloper toolsを開いてみてください（私はFirefoxで放火犯を使用しますが、組み込みの開発ツールあまりにも素晴らしいです）、あなたがボタンをクリックすると、コンソール出力を見てください。あなたがまだ開発ツールに精通していないなら、間違いなくそれらをチェックしてください。彼らはあなたのコーディングの生活をはるかに簡単にします。

私は完全な答えの後ではありません - 私はどこに行くのかというだけのポインタ が間違っています。

ボタンをクリックしてFirebugコンソールを見ると、エラーReferenceError: myFunction is not definedが表示されています。

定義する前にmyFunction関数を呼び出すようです。ブラウザーはその機能を実行することを知らないので、機能は実行されていません。

その他の問題があるかもしれませんが、私はこの機能を実際に実行しようとすることから始めます。link要素のIDを与えるJSの必要性のために

$("link:first").attr('href',"handbuilt.css"); 

例えば

<button onclick="$('link:first').attr('href','handbuilt.css');">Click to see page with Styling</button> 

：jQueryの必要に

Answer 2

。例えば

<link rel="stylesheet" href="" id="styleid"> 

、その後

document.getElementById("styleid").href = "handbuilt.css" 

例えば（これはあなたのサイトでの作業です）

<button onclick="document.getElementById('styleid').href = 'handbuilt.css'">Click to see page with Styling</button> 

Answer 3

そうするためには、動的にHTMLを更新するためにJavaScriptを使用する必要がありますあなたのページのコードあなたはすでにあなたが今のスタイルシートを更新するための適切なJavaScriptコードを含める必要があり、myFunction0（あなたのボタンにリンクされているJavaScriptの機能を持っている

あなたのヘッダーにこのような何かを持っている必要があります。

<script type="text/javascript"> 
function myFunction(){ 
    //your code 
} 
</script> 

あなたは見つけることができますこの関数で何を書くかのアイデアhere。 これで解決できるはずです。

Answer 4

JavaScript関数を見てみると、getElementByIdというメソッドが使用されています。 HTML内の要素にId属性を追加することができます。メソッドが探しています。確認するには、デベロッパーツールを開くことができます（ChromeではF12を使用するか、右クリックして[Inspect]を選択します）。開発ツールには、JavaScriptを書くことができるコンソールがあり、結果が返されます。また、console.log（）などで記録された情報が表示されます。 Idと要素を追加し、コンソールで 'getElementById'メソッドを使用して、返される内容を確認してください。

これを調べたら、選択した要素の属性をJavaScriptで変更することができます。いくつかの自己探検やグーグルがこれを行う方法を教えてくれるでしょう。あなただけのあなたのリンクがページにもたらしている正確に何を修正することができますこの方法です。..

Answer 5

HTML：頭で

：

体で

<link rel="stylesheet" href="./css/style1.css" id="styling"> 

：

<button type="button" name="button" onclick="toggleCSS()"> Toggle CSS </button> 

JS：

function toggleCSS() 
    { 
    var link = document.getElementById('styling'); 
    link.disabled = !link.disabled; 
    } 

t彼のコード、ボタンイベントでCSSを有効にしたり無効にしたりしています。シンプル!!! :-)