SQLの窓

2013年12月11日


IE11 から利用可能になったカスタムデータ属性(datasetプロパティ)

当然、Google Chrome や Firefox は既に利用できます。

Microsoft の英文サイトのドキュメントにあるサンプルコード酷いバグ( Microsoft とは到底思えない酷いもの )持ちだったので、正しく修正したものをここに記載しておきます。
<style>
div {
	display:block;
	border: solid 2px green;
	width:200px;
	height:200px; 
	text-align:center;
}
button {
	position:absolute;
	top:250px;
}
</style>
<!-- This div element contains four custom data attributes -->
<div id="spacegame" 
	data-ship-id="Infinity" 
	data-weapons="magnetic accelerator cannons"  
	data-shield-value="100"
	data-registry="INF 101">UNSC Infinity</div>
<button id="shootNow" onclick="Shoot();"> Fire </button>   
<script>
//  get the div element
var myDiv = document.getElementById('spacegame');

// function to subtract the shield value
function Shoot() {
	var shieldsRemaining = parseInt(myDiv.dataset.shieldValue);
	shieldsRemaining -= 25;  // subtract 25%
	// if shields are below 25%, ship is destroyed
	if (shieldsRemaining < 25){
		myDiv.textContent = "The " + myDiv.dataset.shipId + " is now destroyed"; // signal ship is gone
		myDiv.style.backgroundColor = "red"; // change color of block
		document.getElementById("shootNow").disabled = true; // don't allow any more input
	}
	else {
		myDiv.dataset.shieldValue = shieldsRemaining.toString();
	}
}
</script>



UNSC Infinity
クリック4回目で赤くなります


【IEの最新記事】
posted by lightbox at 2013-12-11 13:07 | IE | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり