test3のセットを制作
これからは、console.logも
$(function(){
});
の中に記述しますよ。
【ボタンをクリックしたら文字を赤くする】
--->test3.html
<!DOCTYPE html>
<html lang="ja" hoge="foo">
<head>
<meta charset="UTF-8">
<title>test3</title>
<link rel="stylesheet" href="test3.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<button id="btn">click!</button>
<div id="dl">jQuary</div>
<script src="test3.js"></script>
</body>
</html>
--->test3.js
$(function(){
$("#btn").on('click',function(){
$('#dl').css('color','red');
});
});
onメソッドの第一引数と第二引数の場所↑
>css()メソッドで複数のプロパティを変更する記述方法(自習)
$(function(){
$("#btn").on('click',function(){
$('#dl').css({ //css()メソッドで複数のプロパティを変更する
'color':'red',
'fontSize':'2rem'
});
});
});
【クリックしたらopacity(オパシティ)を変える】
opacity 透明度のこと
$(function(){
$("#btn").on('click',function(){
$('#dl').css('opacity',0.5);//オパシティ,0-1までの数値を記述,透過度
});
});
【d2を作ってボタンを押すとその背景も薄くなるようにする】
htmlに以下を追加
<div id="d2">a</div>
js側も追加
$(function(){
$("#btn").on('click',function(){
$('#d1'&&'#d2').css('opacity',0.5);//オパシティ,0-1までの数値を記述,透過度
});
});
