> 웹 프론트엔드 > JS 튜토리얼 > JS는 페이지의 모든 객체 속성과 구현 방법을 탐색합니다.

JS는 페이지의 모든 객체 속성과 구현 방법을 탐색합니다.

高洛峰
풀어 주다: 2017-01-14 11:11:56
원래의
1661명이 탐색했습니다.

for...in 루프의 Javascript 예:

<html>
<head>
<title>一个使用到for...in循环的Javascript示例</title>
</head>
<body>
<script type="text/javascript">
// 创建一个对象 myObject 以及三个属性 sitename, siteurl, sitecontent。
var myObject = new Object();
myObject.sitename = "布啦布啦";
myObject.siteurl = "blabla.cn";
myObject.sitecontent = "网页教程代码图库的中文站点";
//遍历对象的所有属性
for (prop in myObject)
{
document.write("属性 &#39;" + prop + "&#39; 为 " + myObject[prop]);
document.write("<br>");
}
</script>
</body>
</html>
로그인 후 복사

오늘 온라인 Java Tang 블로그에서는 JavaScript 객체의 모든 속성 이름과 값을 순회하는 방법을 찾았습니다. 이 방법은 사용하고 싶을 때 매우 직관적이고 편리합니다. 코드는 다음과 같습니다.

/*
* 用来遍历指定对象所有的属性名称和值
* obj 需要遍历的对象
* author: Jet Mah
*/
function allPrpos ( obj ) {
// 用来保存所有的属性名称和值
var props = "" ;
// 开始遍历
for ( var p in obj ){
// 方法
if ( typeof ( obj [ p ]) == " function " ){
obj [ p ]() ;
} else {
// p 为属性名称,obj[p]为对应属性的值
props += p + " = " + obj [ p ] + " \t " ;
}
}
// 最后显示所有的属性
alert ( props ) ;
}
로그인 후 복사


AJAX의 JavaScript 반사 메커니즘은 프로그램이 실행될 때 자체 정보를 얻을 수 있음을 의미합니다. 예를 들어, 객체는 런타임 시 자신이 가지고 있는 메서드와 속성을 알 수 있습니다. for(…in…) 문을 사용하여 JavaScript에서 리플렉션을 구현합니다. 구문은 다음과 같습니다.

for(var p in obj){
//语句
}
로그인 후 복사

Ajax 프로그래밍에서는 인터페이스 요소의 스타일을 동적으로 변경해야 하는 경우가 많습니다. . 개체의 스타일 속성을 변경하려면 예를 들어 배경색을 빨간색으로 변경하려면 다음과 같이 작성할 수 있습니다.

element.style.BackgroundColor="#ff0000";

기본적으로 CSS의 속성은 다음과 같습니다. JavaScript에서 사용할 수 있습니다:

function setStyle(_style){
//得到要改变样式的界面对象
var element=getElement();
element.style=_style;
}
로그인 후 복사


전체 스타일 객체를 매개변수:

var style={
color:#ffffff,
backgroundColor:#ff0000,
borderWidth:2px
}
로그인 후 복사

이때 다음과 같이 함수를 호출할 수 있습니다.
setStyle(style);

또는 다음과 같이 직접 작성할 수 있습니다.
setStyle({ color:#ffffff,BackgroundColor:#ff0000,borderWidth:2px});

이 코드는 문제가 없어 보이지만 실제로는 _style 매개변수를 사용하여 값을 할당할 때 setStyle 함수 내의 element.style, 요소에 이미 특정 스타일이 있는 경우(예:
element.style.height="20px";

단, _style은 포함되지 않음) 높이 정의로 인해 요소의 높이 스타일이 손실되며 이는 원래 원하는 결과가 아닙니다. 이 문제를 해결하려면 리플렉션 메커니즘을 사용하여 setStyle 함수를 다시 작성할 수 있습니다.

function setStyle(_style){
//得到要改变样式的界面对象
var element=getElement();
for(var p in _style){
element.style[p]=_style[p];
}
}
로그인 후 복사

프로그램은 _style의 각 속성을 순회하여 속성 이름을 얻은 다음 대괄호 구문을 사용하여 요소 설정 .style의 해당 속성은 _style의 해당 속성에

이 할당됩니다. 페이지의 모든 객체 속성 및 구현 방법에 대한 위의 JS 순회는 모두 편집자가 공유하는 내용이기를 바랍니다. 참고로 저는 모든 사람들이 PHP 중국어 웹사이트를 지원하기를 바랍니다.

페이지의 모든 객체 속성과 구현 방법에 대한 JS 탐색에 대한 자세한 내용은 PHP 중국어 웹사이트에 주목하세요!


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿