«   2025/08   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Tags more
Archives
Today
Total
반응형
«   2025/08   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Tags more
Archives
Today
Total
관리 메뉴

java,javascript,android,php,sql,공부용,메모용

javascript 간단한 event / 버튼클릭 마우스오버 alert / 클릭하면 random값 / 자바스크립트로 style 변경하기 본문

javascript, jQuery & Node.js

javascript 간단한 event / 버튼클릭 마우스오버 alert / 클릭하면 random값 / 자바스크립트로 style 변경하기

yy_dd2 2021. 3. 10. 17:06
반응형

버튼 클릭하면 alert 나오게하는건

    <button onclick="alert('클릭해주셔서 감사합니다');">클릭해주세요</button>

이렇게 할수있지만 올바른 방법이 아니라고 배웠던거 같다

 

간단하게 마우스오버와 아웃 속성을 이용해서 스타일 바꿀수있다

    <div onmouseover="this.style.backgroundColor = 'red';
        this.style.borderRadius = '30px';"
        onmouseout="this.style.backgroundColor = '';
            this.style.borderRadius = '';
        "></div>

여기서 style에 적을때는 background-color 라고 적지만 -를 사용하지 못하니

backgroundColor라고 C대문자로 사용한다

 

클릭하면 이벤트가 실행된다

    <div onclick="clickdHandler(this)"></div>

 

스크립트에

    <script type="text/javascript">
        function clickdHandler(v) {
            var r = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var b = Math.floor(Math.random()*256);
            v.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
        }
    </script>

이렇게 작성하고 클릭하면 박스안의 색이 바뀌도록했다

그리고 테두리도 해줬다 다른색 나오라고 값을 한번 더 돌렸다

    <script type="text/javascript">
        function clickdHandler(v) {
            var r = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var b = Math.floor(Math.random()*256);
            v.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
            if (v.style.backgroundColor){
                r = Math.floor(Math.random()*256);
                g = Math.floor(Math.random()*256);
                b = Math.floor(Math.random()*256);
                v.style.border = `3px solid rgb(${r},${g},${b})`;
            }
            
        }
    </script>

 

 

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    
        button { width:100px; height: 50px;}
        div {background-color: bisque; width: 100px; height: 50px; border: 1px solid deepskyblue;text-align: center; font-size: 15px;}
        
    </style>
    <script type="text/javascript">
        function clickdHandler(v) {
            var r = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var b = Math.floor(Math.random()*256);
            v.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
            if (v.style.backgroundColor){
                r = Math.floor(Math.random()*256);
                g = Math.floor(Math.random()*256);
                b = Math.floor(Math.random()*256);
                v.style.border = `3px solid rgb(${r},${g},${b})`;
            }
            
        }
    </script>
</head>
<body>
    <button onclick="alert('클릭해주셔서 감사합니다');">클릭해주세요</button>
    <br><br>
    <div onmouseover="this.style.backgroundColor = 'red';
        this.style.borderRadius = '30px';"
        onmouseout="this.style.backgroundColor = '';
            this.style.borderRadius = '';
        "></div>
    <br><br>
    <div onclick="clickdHandler(this)"></div>
</body>
</html>

 

반응형

'javascript, jQuery & Node.js' 카테고리의 다른 글

자바스크립트 객체만들기 보여주기 반복문 사용해서 보여주기  (0) 2021.10.14
javascript 문서로딩 load 이벤트 실행, html 아이디 클래스 선택 addEventListener / querySelector & getElementById / LastModified / 현재시간  (0) 2021.03.10
javascript / 사용자 입력받기, 내용 출력하기, 선택하기 / document.wriet(), alert(), confirm(), prompt()  (0) 2021.03.04
javascript 계산법, 연산자  (0) 2021.03.04
javascript alert() / 자바스크립트 경고창 띄우기  (0) 2021.03.03
'javascript, jQuery & Node.js' Related Articles more
Comments