• We suppose to make an element correspond with other elements on the HTML document making use of class name.
• We call here the source element[s] for the one element and the target elements[t_i,_i=1-n] for the others.
• We assume that the source element[s] has two states (toggle) and the target elements[t_i] have two styles[t_i-styleOn/t_i-sytleOff] corresponding with the toggle (on/off).
• When a visitor of this page operates the toggle on the source element[s] the each style [t_i-styleOn/t_i-sytleOff] of the target elements[t₁-t_n] is altered.

• HTML文書上の各要素を、クラス名を用いて1対nで対応付ける事を考える
• ここではそのひとつの要素をソース要素(s)、n個の要素をターゲット要素(t_i,_i=1-n)と呼ぶ
• ソース要素(s)では２状態を保持するもの（トグル）と考え、ターゲット要素(t_i)はトグル(on/off)に対応するふたつのスタイル(t_i-styleOn/t_i-sytleOff)を保持するものと考える
• ページ来訪者がソース要素(s)上でトグル操作をすると、ターゲット要素(t₁-t_n)のそれぞれのスタイル(t_i-styleOn/t_i-sytleOff)が切り替わるものと考える

• The source element and the target elements are specified within the arbitrary range of the HTML document tree.
• Collecting n+1 elements which have the same class name within a range for the source element and a range for the target elements, we call source element to an element[1] and target elements [n] to the others.
  Note that the correspondence between elements is only shown for the in-site class name in the following example.
• ace gets the first class name from the element which have a class attribute in the range for the source element and the element is specified as the sorce element. The class name must be unique in therange for the source element.
• And ace searches by the class name which has been specified as source element within the range for the target elements to get the target elements.
• ace uses a style class object for the style definition of the target element which is to be alternated with the toggle of the source element.

• ソース要素、ターゲット要素は、それぞれ全HTML要素の内、範囲指定した要素グループ内から特定される。
• ソース要素の特定指定範囲内と、ターゲット要素の特定指定範囲内で、同一のクラス名を持つ要素(n+1個)を選び出し、それらのひとつをソース要素(1個)と呼び、他をターゲット要素(n個)と呼ぶ
  註：ここでは、具体例でのクラス名 in-site で特定される要素間の対応関係のみ示している。
• aceはソース要素の特定指定範囲内で、class属性を持つ要素から先頭のクラス名を取り出し、その要素をソース要素として特定する。そのクラス名はソース要素の特定指定範囲内でユニークでなければならない。
• 次いでaceはターゲット要素の特定指定範囲内を、ソース要素として特定したクラス名で順次検索し、対応する要素を特定しターゲット要素を得る。
• （ソース要素のトグルに応じ切り替わる）ターゲット要素のスタイル定義に、スタイル・クラス・オブジェクトを用いる

 HTML 
	:
  <p id="in-ex-legend">								
	:									
    <span class="ext ">external page</a>					
	:									
    <span class="in-site ">in-site Page</a>					
	:									
  </p>										

  <p id="link-list">								
	:									
    <a href="linkA.html" class="in-site toggleInSite">link A</a>		
	:									
    <a href="http://ext.do.main/" class="ext toggleExSite">Site X</a>		
	:									
    <a href="linkB.html" class="in-site toggleInSite">link B</a>		
	:									
  </p>										

 JavaScript 

    oAce = new _ace({ treeId: 'in-ex-legend', type: 'checkbox' },
		{									
			toggleInSite: {							
				styleOn:  { backgroundColor: '#ffcccc' },		
				styleOff: { backgroundColor: 'transparent' }		
			},								
			toggleExSite: {							
				styleOn:  { backgroundColor: '#ccccff' },		
				styleOff: { backgroundColor: 'transparent' }		
			}								
		},									
		'link-list');

• The style class object is a JavaScript object which has properties named with the class name to be specified for the target elements and the values of the properties for the style definitions, alternating the styles with the toggle.
• The style definition is an object which has properties named styleOn and styleOff and their value as an object which describes the style directly here, or properties named classOn and classOff and their value as a string of a class list which describes the style indirectly referring the style sheet classes.

• スタイル・クラス・オブジェクトは、ターゲット要素に指定され得るクラス名をプロパティとし、トグルに応じるスタイル定義を値とする、JavaScriptオブジェクトである。
• スタイル定義もオブジェクトで、ここで直接定義する為のプロパティ（styleOn, styleOff）とその定義を表す値（オブジェクト）、および別にスタイルシートで宣言されたクラスの参照で間接定義する為のプロパティ（classOn, classOff）とそのクラスを表す値（文字列）で構成される

style class object
  {
	class name1: style definition1,
	class name2: style definition2,
		:
  }

style definition
  {
	styleOn:  style description object // style for toggle on
	styleOff: style description object // style for toggle off
	classOn:  class name list string   // class for toggle on
	classOff: class name list string   // class for toggle off
  }

style description object
  {
	property1: vlaue1,
	property2: vlaue2,
		:
  }

	<html>
	<head>
	    :
|	<script src="_fss.js" type="text/javascript"></script>
|	<script src="_jlog.js" type="text/javascript"></script>
|	<script src="_ace.js" type="text/javascript"></script>
|	<script src="foobar.js" type="text/javascript"></script>
	    :
	</head>
	<body>
	    :
	</body></html>

	function foobar() {
|		this._log('foobar(): entered',0);
		:
		this.oAce = new _ace(srcArg,	// cf. source code	
			styleClassObjects,	// 			
			tgtTreeId,		//			
			collectSrcElt,		//			
			tgtSearchTagName,	//			
			tgtEltFound);		//			
		:
	}

	function foobarInit() {
		:
		ofb = new foobar();
		:
	}

	window.onload = function () {
|	//	_fss.prototype._jlOffStartup = true; // to inactivate
|	//	_fss.prototype._jlHideJlogButtonOnStartup = true; // to hide
|		foobar.prototype._jlogSetUp(foobarInit);  // log for only foobar 
|	//	_fss.prototype._jlogSetUp(foobarInit);  // log for all
		foobarInit();
	}

• _fss.js, _fss.html
• _jlog.js
• _ace.js
• gpl.txt, dlgpl.php
• foobar.js
• foobar.html