WEB/JavaScript
[JS] 배경색변경
애플쩀
2022. 6. 5. 18:01
배경색 바꿀때 document.bgColor 사용
`${변수명}` 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.05 07:10:31</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h3>ex03.html</h3>
<select name="" id="" onchange="test(this)">
<option value="red">빨강</option>
<option value="green">녹색</option>
<option value="blue">파랑</option>
<option value="white">흰색</option>
</select>
<p id="demo">red/빨강</p>
<script>
function test(sel){
var idx=sel.selectedIndex;
var value=sel.options[idx].value;
var text=sel.options[idx].text;
// $("#demo").text(text+","+value);
$("#demo").html(`value=${value} / text=${text}/ index=${idx}`);
document.bgColor=value;
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.05 07:53:45</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h3>ex03_02.html</h3>
<script>
var $sel=$("<select></select>");
$("body").append($sel);
var colors=["white","red","green","blue"];
colors.forEach(function(elt,i,array){
$sel.append("<option value="+elt+">"+elt+"</option>");
});
$sel.change(function(event){
document.bgColor=$(this).val();
});
</script>
</body>
</html>$sel.change(function(event){ document.bgColor=$(this).val();});
이부분 왜 ..(this options:selected)가 아니지?!?