<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.5">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
$("input").click(function(){
$("#second").text($("#first > span").text()).removeAttr("id").addClass("show");
});
});
</script>
<style>
#first{
width:600px;
height:300px;
background-color:#00FFCC;
line-height:36px;
font-size:14px;
padding:20px;
}
#first > span{
color:#FF0000;
}
#second{
background-color:rgba(0,255,106,0);
}
.show{
position:fixed;
top:20px;
right:40px;
width:200px;
height:200px;
background-color:rgba(0,255,106,1.0);
line-height:200px;
text-align:center;
color:#0000FF;
/*これらを記述するとアニメーションが加わります*/
/*
-moz-transition-property:background-color;
-webkit-transition-property:background-color;
-o-transition-property:background-color;
-ms-transition-property:background-color;
-moz-transition-duration:1s;
-webkit-transition-duration:1s;
-o-transition-duration:1s;
-ms-transition-duration:1s;
-moz-transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;
-o-transition-timing-function:ease-in-out;
-ms-transition-timing-function:ease-in-out;
*/
}
</style>
</head>
<body>
<p>ボタンをクリックkして、div要素の子要素であるspan要素内のテキストを取得し、右上に表示しなさい</p>
<input type="button" value="click">
<div id="first">div要素 div要素 div要素 <span>span要素</span>div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 div要素 </div>
<div id="second"></div>
</body>
</html>