2018/9/3 css関連とイベント関連 その組み合わせ javascript

Contents

五章第二回 CSSの構造

5章自体特に問題はない。こうすればこんなことできますね、的な話。それはそれでいいんですが、イベントを組み合わせて、「クリックしたらスタイルが変わりますね、おもしろいですね」みたいなのを作る。

イベントについては3章を参照。

三章第一回 イベントプロパティ


<html>
<head>
<title>test</title>
<style type=”text/css” id=”divsheet”>

div {
background-color: black;
}
p {
background-color: yellow;
}
</style>
<style type=”text/css” id=”bodysheet”>
body {
background-color: pink;
}
</style>
</head>

<body>
<p>testtest</p>
<br>
<br>
<p onmouseover=”mywrite2();” onclick=”reset2();”>真ん中のp</p>

<p id=”middle”></p>
<br>
<p onmouseover=”mywrite3();” onclick=”reset3();”>下のp</p>

<p id=”under”></p>

<script type=”text/javascript”>
function mywrite2(){
let mid=document.getElementById(‘middle’);
mid.innerHTML=”真ん中にマウスオーバーしました。”;
}
function reset2(){
let mid=document.getElementById(‘middle’);
mid.innerHTML=””;
}
function mywrite3(){
let und=document.getElementById(‘under’);
und.innerHTML=”下にマウスオーバーしました。”;
}
function reset3(){
let und=document.getElementById(‘under’);
und.innerHTML=””;
}

</script>
</body>

p要素にマウスオーバーしたらその下部のp要素にメッセージを表示。

p要素をクリックしたら下部のメッセージが消える。


<!doctype html>
<html>
<head>
<title>test</title>
<style type=”text/css” id=”divsheet”>

div {
background-color: black;
}
p {
background-color: pink;
}
</style>
<style type=”text/css” id=”bodysheet”>
body {
background-color: skyblue;
}
</style>
</head>
<body>

<p>testtest</p>
<br>
<br>
<p id=”midp”>真ん中のp</p>

<p id=”middle”></p>
<br>
<p id=”undp”>下のp</p>

<p id=”under”></p>

<script type=”text/javascript”>
var midp=document.getElementById(“midp”);
function mywrite2(){
let mid=document.getElementById(‘middle’);
mid.innerHTML=”真ん中にマウスオーバーしました。”;
}
midp.onmouseover=mywrite2
;
function reset2(){
let mid=document.getElementById(‘middle’);
mid.innerHTML=””;
}
midp.onmouseout=reset2;

var undp=document.getElementById(“undp”);
function mywrite3(){
let und=document.getElementById(‘under’);
und.innerHTML=”下にマウスオーバーしました。”;
}
undp.onmouseover=mywrite3;
function reset3(){
let und=document.getElementById(‘under’);
und.innerHTML=””;
}
undp.onmouseout=reset3;

</script>
</body>
</html>

getElementByIdでp要素のHTMLElementを取得して、イベントプロパティに関数オブジェクトを代入するパターン。


<!doctype html>
<!doctype html>
<html>
<head>
<title>test</title>
<style type=”text/css” id=”divsheet”>

div {
background-color: black;
}
p {
background-color: gray;
}
</style>
<style type=”text/css” id=”bodysheet”>
body {
background-color: purple;
}
</style>
</head>
<body>

<p>testtest</p>
<br>
<br>
<p id=”midp”>真ん中のp</p>

<p id=”middle”></p>
<br>
<p id=”undp”>下のp</p>

<p id=”under”></p>

<script type=”text/javascript”>
var midp=document.getElementById(“midp”);
function mywrite2(){
let mid=document.getElementById(‘middle’);
mid.innerHTML=”真ん中にマウスオーバーしました。”;
}
midp.addEventListener(‘mouseover’,mywrite2,false);
;
function reset2(){
let mid=document.getElementById(‘middle’);
mid.innerHTML=””;
}
midp.addEventListener(‘mouseout’,reset2,false);

var undp=document.getElementById(“undp”);
function mywrite3(){
let und=document.getElementById(‘under’);
und.innerHTML=”下にマウスオーバーしました。”;
}
undp.addEventListener(‘mouseover’,mywrite3,false);
function reset3(){
let und=document.getElementById(‘under’);
und.innerHTML=””;
}
undp.addEventListener(‘mouseout’,reset3,false);

</script>
</body>
</html>

addEventListenerでイベントをくっつける方法。

三章第二回 イベントリスナ

に書いてある通り、この方法を使うべき。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です