일부 간단한 예에서는 기본 js와 jQuery를 사용하여 div 속성을 변경하고 원하는 대로 재설정합니다. 코드는 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. Div <br>body,p{margin:0;padding:0;} <br>body{color:#333;font:12px /1.5 Tahoma;padding-top :10px;} <br>#outer{width:300px;margin:0 auto;} <br>p{margin-bottom:10px;} <br>버튼{margin-right:5px; } <br>레이블{폭 :5em;디스플레이:inline-block;text-align:right;} <br>입력{padding:3px;font-family:inherit;border:1px solid #ccc;} <br># div1{색상:#fff; 너비:180px;높이:180px;배경:#000;여백:0 자동;패딩:10px;} <br> <br><!DOCTYPE html> <br> <br> <br><meta charset="utf-8"> <br><title> 함수는 Div의 속성 값을 변경합니다. <br><style type= "text/css"> <br>body,p{margin:0;padding:0;} <br>body{color:#333;font:12px/1.5 Tahoma;padding- top:10px;} <br> #outer{width:300px;margin:0 auto;} <br>p{margin-bottom:10px;} <br>버튼{margin-right:5px;} <br>레이블{ width:5em;display:inline- block;text-align:right;} <br>input{padding:3px;font-family:inherit;border:1px solid #ccc;} <br>#div1{color:#fff ;너비:180px;높이:180px ;배경:#000;마진:0 자동;패딩:10px;} <br></style> <br><script type="text/javascript" src="js/ jquery-1.4.2.min.js"> <br>/*varchangeSytle = 함수(요소,이름,값){ <br>elem.style[name] = value; <br>} <br>window.onload = function (){ <br>var oDiv = document.getElementById("div1") <br>var oBtn = document.getElementsByTagName ("버튼"); <br>var oInput = document.getElementsByTagName("input"); <br>oBtn[0].onclick = function (){ <br>changeSytle (oDiv,oInput[0].value,oInput [1].value) <br>} , <br>oBtn[1].onclick = function (){ <br>oDiv.removeAttribute("style") <br>} <br>} */Native js 부분 구현<br><br>$ (function(){ <br>$("button:first").click(function(){ <br>var styleName= $("#outer").find("input: first").val(); <br>var styleVal = $("#outer").find("input:last").val(); <br>$("#div1").css(styleName, styleVal); <br>}) <br>$("button:last").click(function(){ <br>$("#div1").removeAttr("style"); <br>}) <br>}) <br><br> ;p>속성 이름: < label>속성 값: OK< ;/button>Reset "속성 이름 입력 상단 입력란에 "와 "속성값"을 입력한 후 확인 버튼을 클릭하면 효과를 확인할 수 있습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
