자바스크립트에서 사진을 추가하는 방법
- 藏色散人원래의
- 2021-06-26 14:05:065956검색
JavaScript를 사용하여 이미지를 추가하는 방법: 먼저 createElement() 메서드를 사용하여 img 요소를 만든 다음 이미지의 URL 주소 값을 img 요소의 src 속성에 할당하고 마지막으로 addChild() 메서드를 사용합니다. img 요소를 지정된 dom 객체에 추가합니다.
이 문서의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.
자바스크립트로 이미지를 추가하는 방법은 무엇인가요?
createElement() 메소드
createElement() 메소드는 이름을 지정하여 요소를 생성합니다.
구문:
document.createElement(nodename)
매개변수: nodename: 필수. 요소의 이름을 만듭니다.
반환 값: 생성된 요소 노드
getElementById() 메서드
getElementById() 메서드는 지정된 ID를 가진 첫 번째 개체에 대한 참조를 반환합니다.
HTML DOM은 요소를 찾기 위한 여러 메서드를 정의합니다. getElementById() 외에도 getElementsByName() 및 getElementsByTagName()도 있습니다.
지정된 ID를 가진 요소가 없으면 null을 반환합니다.
지정한 ID를 가진 요소가 여러 개 있으면 정의되지 않음을 반환합니다.
구문:
document.getElementById(elementID)
appendChild() 메서드
appendChild() 메서드는 노드의 하위 노드 목록 끝에 새 하위 노드를 추가합니다.
팁: 문서 트리에 newchild가 이미 있는 경우 문서 트리에서 제거되고 새 위치에 다시 삽입됩니다. newchild가 DocumentFragment 노드인 경우 직접 삽입되지는 않지만 해당 하위 노드는 현재 노드의 childNodes[] 배열 끝에 순서대로 삽입됩니다.
appendChild() 메서드를 사용하여 요소를 다른 요소로 제거할 수 있습니다.
구문:
node.appendChild(node)
매개변수: 노드: 필수. 추가하려는 노드 개체입니다.
예: div 요소에 이미지를 추가하는 JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function() {
var bigImg = document.createElement("img"); //创建一个img元素
bigImg.src = "https://www.html.cn/static/images/logo.png"; //给img元素的src属性赋值
//bigImg.width="320"; //320个像素 不用加px
var myp = document.getElementById('myp'); //获得dom对象
myp.appendChild(bigImg); //为dom添加子元素img
};
</script>
</head>
<body>
<div id="myp" style="border:1px solid #eee;width:320px;height:100px;"></div>
</body>
</html>[권장: javascript 고급 튜토리얼]
위 내용은 자바스크립트에서 사진을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!