JavaScript/Js 스크립트는 html 요소의 사용자 정의 속성 구문 분석을 처리합니다(Firefox 및 IE와 호환되는 개인 테스트)_javascript 기술

HTML 요소에는 매우 풍부한 속성이 있습니다. 그러나 어떤 경우에는 너무 빡빡할 수도 있습니다. 이때 사용자 정의 속성은 매우 중요한 역할을 합니다.

Html 요소의 사용자 정의 속성은 사용하기 매우 편리합니다. 예:

<입력 유형=”버튼” 값=”Click Me, Baby!”

지금 제한해야 한다고 가정해 보겠습니다. 이 버튼은 2번만 클릭할 수 있으며 그 후에는 유효하지 않게 됩니다.

일반적인 구현 방법은 전역 변수를 사용하여 클릭 수를 기록하는 것이지만 여기서는 맞춤 속성을 사용하여 이 기능을 구현하고 위의 버튼을 수정해 보겠습니다.

<입력 유형=”버튼” 값=”Click Me, Baby!” clickCount=”0” />

보시다시피 이 버튼에 clickCount 사용자 지정 속성을 추가하고 초기 값을 0으로 설정하여 함수를 구현하는 js 코드를 작성하겠습니다.

1. 버튼에 클릭 이벤트 처리 추가

<입력 유형=”버튼” 값=”클릭하세요, 자기야!” clickCount=”0” onclick=”customAttributeDemo(this);”

2. customAttributeDemo(obj) 함수를 작성해 보겠습니다. IE의 경우 사용자 정의 속성을 사용하는 것은 매우 간단합니다. IE는 사용자 정의 속성을 표준 속성과 다르지 않은 DOM으로 자동으로 구문 분석하기 때문입니다.

코드 복사 코드는 다음과 같습니다.

function customAttributeDemo(obj)

{
if (obj.clickCount === '0' )
{
obj.clickCount = '1';
}
else
{
obj.disabled = true;
}
}


FireFox는 사용자 정의 속성 사용에 대한 제한이 더 높고 속성[] 컬렉션을 통해서만 액세스할 수 있으므로 위 코드는 FireFox에서 유효하지 않습니다.

코드 복사 코드는 다음과 같습니다.

function customAttributeDemo(obj)

{
if (obj.attributes[' clickCount' ].nodeValue === '0')
{
obj.attributes['clickCount'].nodeValue = '1';
}
else
{
obj .disabled = true;
}
}


위 코드는 IE에도 적용 가능하므로 이 코드는 호환되는 코드입니다.

네티즌님 덕분에 교환해주신 덕분에 getAttribute, setAttribute 메소드를 알려주셨어요:

코드 복사 코드는 다음과 같습니다:

function customAttributeDemo(obj)

{
if (obj.getAttribute('clickCount') === '0')
obj.setAttribute('clickCount ', '1') ;
else
obj.disabled = true;
}