Jam's story

[JS] 배경색변경 본문

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)가 아니지?!?

 

저작자표시 (새창열림)

'WEB > JavaScript' 카테고리의 다른 글

[JS] < ,> 버튼 과 목차버튼으로 이미지 넘기기  (0) 2022.06.06
[JS] 달력만들기  (0) 2022.06.05
[JS] 달력만들기  (0) 2022.06.03
[JS] Date  (0) 2022.06.03
[JS] 배열  (0) 2022.06.03
'WEB/JavaScript' Related Articles more
Comments