주목해야 할 JS 기본지식 8가지
- php中世界最好的语言원래의
- 2018-03-13 13:16:111567검색
이번에는 주목해야 할 JS 기본 지식 8가지를 소개합니다. 주의해야 할 JS 기본 지식 8가지에는 무엇이 있나요? 실제 사례를 살펴보겠습니다.
1 JS에서 요소의 클래스 이름 수정: className을 통해 수정할 수 있지만 class
function toRed() { var tobox = document.getElementById('box1');
tobox.className = 'tmpBox';
}
2 함수 매개변수 전달
<html lang="en"><head>
<meta charset="UTF-8">
<title>02-函数传参数</title>
<style>
#div1{width: 200px; height: 200px; border: 1px solid #000;} </style>
<script>
function setColor(color) { var oDiv = document.getElementById('div1');
oDiv.style.backgroundColor = color;
} </script></head><body><input type="button" value="变绿" onclick="setColor('green')"><input type="button" value="变黄" onclick="setColor('yellow')"><input type="button" value="变黑" onclick="setColor('black')"><div id="div1"></div></body></html>
3 속성을 수정하는 두 번째 방법: (< ;a> 수정된 속성이 고정되지 않은 경우 5db79b134e9f6b82c0b36e0489ee08ed)를 사용하세요
oDiv.style[속성 이름] = value;//括号里放的是变量
function setStyle(propertyName,value) {
var oDiv = document.getElementById('div1');
oDiv.style[propertyName] = value;
}<html lang="en"><head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{ width: 100px;height: 100px;border: 1px solid #000;background-color: skyblue;
} </style>
<script>
function setStyle(propertyName,value) { var oDiv = document.getElementById('div1');
oDiv.style[propertyName] = value;
} </script></head><body><input type="button" value="变高" onclick="setStyle('height','200px')"><input type="button" value="变宽" onclick="setStyle('width','200px')"><input type="button" value="变红" onclick="setStyle('background','red')"><div id="div1"></div></body></html>
4를 통해 속성과 값을 동적으로 수정할 수 있습니다. style 및 className
Element.style.Attribute = xxx;는 수정된 인터라인(인라인) 스타일이며 우선 순위가 상대적으로 높습니다. 예: oDiv.style.BackgroundColor = 'red ';
className: 클래스 이름을 지정하여 해당 스타일을 찾을 수 있습니다.
그러나 스타일을 사용한 다음 className을 사용하여 스타일을 지정하면 아무런 효과가 없습니다!!!!
5.提取行间事件window.onload는 페이지가 로드된 후에만 실행됩니다.
동작, 스타일 및 구조 분리: JS CSS HTML 분리
<html lang="en"><head>
<meta charset="UTF-8">
<title>05-提取行间事件</title>
<script>
//window.onload 页面加载完成时才执行
window.onload = function () { var oBtn = document.getElementById('btn1'); //给元素添加事件
oBtn.onclick = function () { //匿名函数
alert('我是打酱油的');
};
} </script></head><body><input id="btn1" type="button" value="按钮"></body></html>
6.JS는 상위 요소에서 하위 요소를 가져옵니다.
다음 코드에서 입력<div id="box1">
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br></div>을 가져와서 다음과 같이 입력하세요.window.onload =function (){ var oDiv = document.getElementById('box1'); //现获取父元素div
var inputs = oDiv.getElementsByTagName('input'); //再通过div获取到里面所有的input}
7 . innerHTML
은 컨테이너 라벨의 내용을 설정하는 데 사용되며, 텍스트일 수도 있고 HTML(태그)일 수도 있습니다.<html lang="en"><head>
<meta charset="UTF-8">
<title>08-innerHTML</title>
<style>
.content{ width: 200px; height: 200px; border: 1px solid #000;
} </style>
<script>
window.onload = function () { var oText = document.getElementById('textField'); var oBtn = document.getElementById('button'); var oContent = document.getElementById('div-content');
oBtn.onclick = function () {
oContent.innerHTML = oText.value;//可以往里放文字,标签等
}
} </script></head><body><input type="text" id="textField"><input type="button" value="点击" id="button"><div class="content" id="div-content"></div></body></html>8. 문자열 접합:var str = '我叫小明'+12+'岁'+168+'2017'; >>> 结果:我叫小明12岁1682017var num = '9+6等于'+(9+6); >>> 结果: 9 + 6 等于 15이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 자료:
위 내용은 주목해야 할 JS 기본지식 8가지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：정규식에 대한 몇 가지 작은 연습다음 기사：정규식에 대한 몇 가지 작은 연습