GHWEB06.GRASSHOPPER

スクリプトとサンプル

function getStyle() {
	var str = location.search.substring(1);
	if(str){
		var setStyle = str.split("=");
		var css = setStyle[1];
		}
	switch (css){
		case 'A':
		document.write('\n<link rel="stylesheet" type="text/css" href="style33a.css">');
		break;
		case 'B':
		document.write('\n<link rel="stylesheet" type="text/css" href="style33b.css">');
		break;
		}
}
getStyle();

サンプル

スクリプトの処理内容

function getStyle() {

//?を除いた文字列を取得して変数に代入
//例）sample33.html?css=A の場合は、css=A になります。
var str = location.search.substring(1);

if(str){
//変数strをsplitで分割
//例）css=A なら css,A になります。
var setStyle = str.split("=");

//分割した結果を配列として取り出します。
//例）css,A なら setStyle[1] で A を取り出す
var css = setStyle[1];

//switchで条件分岐をします。
switch (css){
case 'A':

//document.write でスタイルシートを出力 ※\nは改行
document.write('\n<link rel="stylesheet" type="text/css" href="style33a.css">');
break;

//function getStyle()の実行
getStyle();

こちらは、jQueryを使用します。jQueryは、Google Hosted Libraries の バージョン1.11.1 を使用します。★バージョン2.1.1でも動作可能。

スクリプトとサンプル

$(function(){
	/* var path = location.href.split('/').pop(); */
	/* var css = path.replace(/sample34.html#/g,''); */
	var path = location.hash;
	var css = path.replace(/#/g,'');
	switch (css){
		case 'A':
		$("#style").attr("href", "style33a.css");
		break;
		case 'B':
		$("#style").attr("href", "style33b.css");
		break;
		}
});

サンプル

スクリプトの処理内容

/*
location.hrefで取得したURLを区切り文字 / で分割し、
最後尾をpop()で取出して path に代入。
例）URLがhttps://ghweb.info/sample34.html#A なら、sample34.html#A が代入されます。

var path = location.href.split('/').pop();

※追記、表示は変わりませんがlocation.hashの方が無駄が少ないので良いです。
location.hash を使用すると#以降の部分を取得出来ます。
例）URLがhttps://ghweb.info/sample34.html#A なら、#A が代入されます。
*/
var path = location.hash;

/*
変数pathをreplace()を使って不要な部分を削除します。
例）sample34.html#A なら、A。#A なら、Aになります。
*/
var css = path.replace(/#/g,'');

/* switchで条件分岐をします。*/
switch (css){
case 'A':
		
/*
attr()で id style で指定しているstyleのhrefを変更
Aの場合、style33.css を style33a.css にします。
*/
$("#style").attr("href", "style33a.css");
break;
}

どちらも同じ動きになりますが、Google アナリティクスで見ると、URLパラメータを使うとパラメータURL毎に解析することが可能です。