기루 기룩 기록

Java Script 03 - Html 엘리먼트 가져오기 본문

web/JavaScript

Java Script 03 - Html 엘리먼트 가져오기

남기루 2019. 11. 13. 11:16
반응형

Java Script Html 엘리먼트 가져오기

var getEle = document.getByElementById("HTML Tag Id");

 

HTML BODY

// HTML body
<body>
	<input id = 'userid' type='text' maxlength='12' size='20'> 
    <input type="button" value="미리보기" onclick = "printText()">
	<br>
	색상:
	<select id = "textColor">
      <option value="red"> 빨강 </option>
      <option value="green"> 초록 </option>
      <option value="blud"> 파랑 </option>
	</select>
	<br>
	크기:
	<select id = "textPx">
      <option value="1"> 1 </option>
      <option value="2"> 2 </option>
      <option value="3"> 3 </option>
      <option value="4"> 4 </option>
      <option value="5"> 5 </option>
	</select>
	<br>
    <input type="checkbox" name ="line">취소선
    <input type="checkbox" name ="line">크게
    <input type="checkbox" name ="line">작게
    <input type="checkbox" name="line">두껍게
    <input type="checkbox" name ="line">기울임 
    <br>
    <input type="checkbox" name ="line">위첨자
    <input type="checkbox" name="line">아래첨자
    <input type="checkbox" name ="line">소문자로
    <input type="checkbox" name ="line" >대문자로
    <br>
	<span id="result"></span>
</body>

Script CODE

// getElementById("HTML ID");
<script language = "javascript">
  function printText(){
    var objid = document.getElementById("userid");
    var objtextColor = document.getElementById("textColor");
    var objtextPx = document.getElementById("textPx");
    var objresult = document.getElementById("result");
    var objtextOptions = document.getElementsByName("line");
    }
</script>

 

반응형
저작자표시
'web/JavaScript' Related Articles more