とほほのJavaScript入門(IE4拡張)とほほのJavaScript入門(IE4拡張)IE4.0では次のようにして、ドキュメント中の各要素をダイナミックに変更することができる。<HTML> <HEAD> <TITLE>テスト</TITLE> <SCRIPT LANGUAGE="JScript"> <!-- function func() { document.all.ZZZ.style.color = "red"; document.all.ZZZ.style.fontSize = "28pt"; document.all.ZZZ.innerText += "!!"; } // --> </SCRIPT> </HEAD> <BODY> <H1 ID="ZZZ">DHTMLの世界にようこそ</H1> <BUTTON onClick="func()">Click me!!</BUTTON> </BODY> </HTML>これは、開始タグと終了タグの間に挟まれた部分を要素オブジェクトとして扱い、その属性をJScriptでダイナミックに変更することにより実現する。要素オブジェクトの配列(elements)、要素オブジェクト(element)は次のような書式で指定することができる。
elements = document.all elements = document.all.idName elements = document.all.item(idName) elements = document.all.tags(tagName) element = elements[n] element = document.all(n) element = document.all.idName element = document.all.item(idName)ここで、idNameはタグのID属性で指定した名前であり、複数のタグで指定されていれば要素オブジェクトの配列を、単一のタグで指定されていればひとつの要素オブジェクトを返す。tagNameは "PRE" などのタグ名であり、常に要素オブジェクトの配列を返す。それぞれの要素オブジェクトに対して指定可能なプロパティとして、例えば次のようなものがある。詳細な説明は省略するが、「とほほのスタイルシート入門」のリファレンスとあわせて読めば、使い方も想像できるものが多いと思う。
elements.length element.className element.document element.id element.innerHTML element.innerText element.isTextEdit element.lang element.language element.offsetHeight element.offsetLeft element.offsetParent element.offsetTop element.offsetWidth element.outerHTML element.outerText element.parentElement element.parentTextEdit element.sourceIndex element.style element.style.background element.style.backgroundAttachment element.style.backgroundColor element.style.backgroundImage element.style.backgroundPosition element.style.backgroundPositionX element.style.backgroundPositionY element.style.backgroundRepeat element.style.border element.style.borderBottom element.style.borderBottomColor element.style.borderBottomStyle element.style.borderBottomWidth element.style.borderColor element.style.borderLeft element.style.borderLeftColor element.style.borderLeftStyle element.style.borderLeftWidth element.style.borderRight element.style.borderRightColor element.style.borderRightStyle element.style.borderRightWidth element.style.borderStyle element.style.borderTop element.style.borderTopColor element.style.borderTopStyle element.style.borderTopWidth element.style.borderWidth element.style.clear element.style.clip element.style.color element.style.cssText element.style.cursor element.style.display element.style.filter element.style.font element.style.fontFamily element.style.fontSize element.style.fontStyle element.style.fontVariant element.style.fontWeight element.style.height element.style.left element.style.letterSpacing element.style.lineHeight element.style.listStyle element.style.listStyleImage element.style.listStylePosition element.style.listStyleType element.style.margin element.style.marginBottom element.style.marginLeft element.style.marginRight element.style.marginTop element.style.overflow element.style.paddingBottom element.style.paddingLeft element.style.paddingRight element.style.paddingTop element.style.pageBreakAfter element.style.pageBreakBefore element.style.pixelHeight element.style.pixelLeft element.style.pixelTop element.style.pixelWidth element.style.posHeight element.style.position element.style.posLeft element.style.posTop element.style.posWidth element.style.styleFloat element.style.textAlign element.style.textDecoration element.style.textDecorationBlink element.style.textDecorationLineThrough element.style.textDecorationNone element.style.textDecorationOverline element.style.textDecorationUnderline element.style.textIndent element.style.textTransform element.style.top element.style.verticalAlign element.style.visibility element.style.width element.style.zIndex element.style.getAttribute() element.style.removeAttribute() element.style.setAttribute() element.tagName element.title element.click() element.contains() element.getAttribute() element.insertAdjacentHTML() element.insertAdjacentText() element.removeAttribute() element.scrollIntoView() element.setAttribute()これらのプロパティや、その他の数多くのプロパティについての説明は来年に・・・(^_^;)(1998.12.27記)