집 > 기사 > 웹 프론트엔드 > 자바스크립트에서 요소를 수정하는 방법

자바스크립트에서 요소를 수정하는 방법

青灯夜游원래의: 2021-06-18 17:18:514817검색

방법: 1. "element.innerText='value'" 또는 "element.innerHTML='value'" 문을 사용하여 요소 콘텐츠를 수정합니다. 2. "element.style" 또는 "element.className" 문을 사용합니다. 요소 스타일 속성을 수정합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

요소 운영 및 수정

JavaScript DOM 작업은 웹 페이지의 콘텐츠, 구조 및 스타일을 변경할 수 있습니다. DOM 작업 요소를 사용하여 요소 내부의 콘텐츠, 속성 등을 변경할 수 있습니다.

요소

element.innerText의 내용을 시작 위치에서 끝 위치로 변경하지만 html 태그가 제거되고 공백과 줄바꿈도 제거됩니다. element.innerText从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

element.innerHTML

element.innerHTMLhtml 태그를 포함하여 시작 위치부터 끝 위치까지의 모든 콘텐츠(공백과 줄바꿈은 유지).

innerText는 HTML 태그를 인식하지 못하고 innerHTML은 HTML 태그를 인식합니다. 이 두 속성은 읽고 쓸 수 있습니다.

<body>
    <button>
        显示系统当前时间
    </button>
    <div>
        某个时间
    </div>
    <script>
    	var btn = document.querySelector(&#39;button&#39;);
        var div = document.querySelector(&#39;div&#39;);
        btn.onclick = function(){
            div.innerText = getDate();
        }
        
        function getDate(){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var dates = date.getDate();
            var arr = [&#39;星期日&#39;,&#39;星期一&#39;,&#39;星期二&#39;,&#39;星期三&#39;,&#39;星期四&#39;,&#39;星期五&#39;,&#39;星期六&#39;];
            var day = date.getDay();
            return &#39;今天是&#39;+year+&#39;年&#39;+month+&#39;月&#39;+dates+&#39;日&#39;+arr[day];
        }
    </script>
</body>

실행 후 특정 시간이 표시됩니다. 현재 시스템 시간을 표시하기 위해 클릭하면 현재 날짜와 주가 표시됩니다.

자바스크립트에서 요소를 수정하는 방법

스타일 속성 수정

element.style은 인라인 작업을 수정하고, element.className은 클래스 이름 스타일 속성을 수정합니다.

<head>
	<style>
        div {
            width:200px;
            height:200px;
            background-color:pink;
        }
	</style>
</head>
<body>
    <div>
        
    </div>
    <script>
    	var div = document.quertSelector(&#39;div&#39;);
        div.onclick = function(){
         this.style.backgroundColor = &#39;purple&#39;;
         this.style.width=&#39;300px&#39;;
        }

    </script>
</body>

프로그램이 실행된 후 너비와 높이가 다음과 같은 분홍색 상자가 나타납니다. 200픽셀이 나타나면 상자를 클릭하여 너비 300픽셀, 높이 200픽셀의 보라색 상자로 만듭니다. JS는 스타일 스타일 작업을 수정하고 인라인 스타일을 생성합니다.

className을 사용하여 스타일 속성 변경

<head>
    <style>
        div {
            width:100px;
            height:100px;
            background-color:pink;
        }
        .change {
            width:200px;
            height:200px;
            background-color:purple;
        }
    </style>
</head>
<body>
    <div>
       文本    
    </div>
    <script>
    	vet test =document.querySelector(&#39;div&#39;);
        test.onclick = function(){
            //将当前元素的类名改为change
          this.className = &#39;change&#39;;  
        }
    </script>
    
</body>

[관련 권장사항: javascript 학습 튜토리얼]

🎜

위 내용은 자바스크립트에서 요소를 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：자바스크립트에서 최소값을 찾는 방법다음 기사：자바스크립트에서 최소값을 찾는 방법