자바스크립트에서 요소를 수정하는 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

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

青灯夜游

Jun 18, 2021 pm 05:18 PM

javascript

방법: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사