코드:
결과보기 »
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>jQuery Element Access</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script> $(function() { $("#getter").on("click", function() { var size = "너비는 " + $("#box").width() + "px이고, 높이는 " + $("#box").height() + "px입니다.<br>"; $("#text").html(size); }); $("#setter").on("click", function() { w = $("#box").width(); h = $("#box").height(); $("#box").width(w/2).height(h/2); var size = "너비는 " + $("#box").width() + "px이고, 높이는 " + $("#box").height() + "px로 변경되었습니다.<br>"; $("#text").html(size); }); }); </script> </head> <body> <h1>.width() 메소드와 .height() 메소드</h1> <p>아래의 버튼을 누르면 다음 div 요소의 크기를 읽어오거나 설정할 수 있어요!!</p> <button id="getter">크기 읽어오기!</button> <button id="setter">크기 줄이기!</button><br><br> <div id="box" style="width: 400px; height: 200px; background-color: yellow"></div> <p id="text"></p> </body> </html>
