ドロップダウンメニューを使用してCSSスタイルシートを交換する特定のJavaScript関数

-1

このタイプの質問はこれまでに回答されていますが、私のクラスの課題を渡すにはJavaScriptを使用する必要があります。提供されているJavaScript）と、私のスタイルシートをコマンドで交換するための指示に従うのが難しいです。ドロップダウンメニューを使用してCSSスタイルシートを交換する特定のJavaScript関数

次のように指示がある：

関数setStyleSource（）は二つの引数、変更するリンク要素のid属性の値である文字列を受け取り、ファイル名の文字列、またはパスプラスファイル名、またはロードするCSSファイルのURLを指定します。要素をクリックしてこのスタイルシートをロードし、前のスタイルシートを破棄するには、要素のonclickイベント属性の値を呼び出します。ここで

<p class="stylechange" onclick="setStyleSource(‘changeable’, ‘alt2.css’)"> … </p>

提供するJavaScriptコードです：

function setStyleSource (linkID, sourceLoc) { 
      var theLink = document.getElementById(linkID); 
      theLink.href = sourceLoc; 
     }

そしてここでは、私のコードのセグメントは、異なるID属性と命令と同じAPエレメントを作成するに私の試みとの両方のCSSのページです、唯一の私のIDとCSSのリンク属性を持つ：

<head>  
     <title>CRAFT412 - Info</title>  
     <link href="css/styles1.css" rel="stylesheet" type="text/css" title="s1" id="s1"/> 
     <link href="css/styles2.css" rel="stylesheet" type="text/css" title="s2" id="s2"/> 
     <link href="css/styles3.css" rel="stylesheet" type="text/css" title="s3" id="s3"/>  
     <script type="text/javascript" src="CTEC1800-Stylesheets.js"> </script>  
    </head>

<p onclick="setStyleSource('2', 'styles2.css')">style 2</p>

私はこれをドロップダウンメニューで動作させたいので、ドロップダウンメニューでも変更したいスタイルシートを選択することができますが、提供されたJavaScriptを使ってこれを実装する方法がわかりません。何か間違ったことをして、これらの指示に少しだけ助けが必要です。

ご協力いただければ幸いです。

出典

2016-04-23 Anonymous

IDとタイトルはできませんリンク要素の一部です。 – fruitjs

@fruitjsよく私は指示に従おうとしています。私は何をしているのか分かりません。私は本当に例が必要です。 –

@fruitjsはい、可能です - そのようなステートメントを作成する前に研究してくださいhttps://www.w3.org/TR/2011/WD-html5-author-20110705/the-link-element.html –

はこれを見て持っている - 私も

Here's a fiddle to play with

<link href="style1.css" rel="stylesheet" type="text/css" title="s1" id="s1"/> 
<select id="mySelect"> 
    <option value="style1.css">Style1.css</option> 
    <option value="style2.css">Style2.css</option> 
    <option value="style3.css">Style3.css</option> 
</select> 

/* the function which changes the src */ 
function setStyleSource (linkID, sourceLoc) { 
    var theLink = document.getElementById(linkID); 
    theLink.href = sourceLoc; 
    console.log(theLink.href); //* console log to make sure */ 
} 

/* this is a listener to listen for changes on the dropdown */ 
document.getElementById("mySelect").addEventListener("change", function(){ 
    var selected = this.options[this.selectedIndex].value; /* the option chosen */ 
    setStyleSource ("s1", selected) 
});

あなたはまた、選択のonchangeプロパティを使用することができ、それをコメントしました：

これはされてリスナーなしです

<select id="mySelect" onchange="setStyleSource ('s1', this.options[this.selectedIndex].value)"> 
    <option value="style1.css">Style1.css</option> 
    <option value="style2.css">Style2.css</option> 
    <option value="style3.css">Style3.css</option> 
</select> 

/* the function which changes the src */ 
function setStyleSource (linkID, sourceLoc) { 
    var theLink = document.getElementById(linkID); 
    theLink.href = sourceLoc; 
}

出典

2016-04-23 14:45:59

ドロップダウンメニューを教えてくださいHTMLとCSSで？私は本当にはっきりしていませんでしたが、私はちょうどフォームや何かからの通常のHTMLドロップダウンリストで提供されたJavaScriptを使用する方法が混乱しています。この割り当てはJavaScriptに関するものではありません。なぜなら、JavaScriptを理解する必要がないため、私たちにいくつかのものを渡した理由です。 –

答えが更新されました、それはどういう意味ですか？ –

私はもっとそれに似ていると思いますが、他のJavaScriptは使用できません。私が提供している小さな部分です。 –

ドロップダウンメニューを使用してCSSスタイルシートを交換する特定のJavaScript関数

答えて

関連する問題