BLOG ARTICLE JavaScript | 2 ARTICLE FOUND

  1. 2007.06.27 Style Properties that Mozilla supports & apply Style Sheet rules 5
  2. 2007.03.07 radio buttons with DOM (FF vs IE problem) 7

Style Properties that Mozilla supports & apply Style Sheet rules

카테고리 없음 2007. 6. 27. 17:48
FF 에서 text에 대한 select 를 막는 방법을 찾다 발견한 것..
IE 에서 selectstart 이벤트에 false 를 리턴하는 것으로 가능 하지만
FF 에서는 -moz-user-select 스타일 속성값을 'none'으로 지정하는 것으로 가능하다. (FF에는 selectstart 이벤트 자체가 존재안함)

스타일 적용시에는 styleSheet 오브젝트의 (document.styleSheets : Array) 메소드를 사용하는데,
IE 에서는 addRule 을 사용
인자값을 3개(필수3개)로,
0번 argument에는 선택자('div', 'p' 등..)를 넣고,
1번 argument에는 스타일 명령("color:blue", "overflow:hidden" 등..)을 넣는다.
2번 argument에는 0부터 시작하는 pages 컬렉션(document.styleSheets[?].pages : Array)에서의 위치할 인수를 넣는다. (-1을 넣으면 제일 뒤에 위치하게 된다.)
반환값은 항상 -1이다. (주의: 오류가 없어도 -1을 반환)
FF 에서는 insertRule 를 사용
인자값은 2개(필수2개)로,
0번 argument에는 스타일 명령을 선택자를 포함하여 넣는다. (예: "#myTable {-moz-user-select:none}")
1번 argument에는 0부터 시작하는 cssRules 컬렉션(document.styleSheets[?].cssRules : Array)에서의 위치할 인수를 넣는다. (주의: addRule과는 다르다, -1 인자값을 넣으면 에러가 난다.)
반환값은 cssRules 컬렉션에서의 위치한 위치값이다.


AND

radio buttons with DOM (FF vs IE problem)

Computer/AJAX 2007. 3. 7. 14:49

요새 난 정신없는 javascript 질을 하고 있는중
나의 동반자 prototype 과 함께.. FF vs IE 와 Opera, Netscape.. 전전긍긍-_-..
지나간 이야기이지만, 그냥 삽질 했던 것 자취를 남긴당
참고로 테스트 환경은 다음과 같다 =_=
Firefox 2.0, Internet Explorer 6.0, Opera 8.5, Netscape 8.1 - on windowsXP


DOM 에서 뭔가 엘리멘트를 만들때 이런 것을 주로 쓴다

createElement(String tagName) : static HTML Element

예를 들면 다음과 같다

var testInputElement = createElement('input');

그리고 속성들을 지정할때는
testInputElement.value = 'korea';
testInputElement.type = 'text';
등과 같이 Element 의 멤버들에 접근하면 된다. (setAttribute 를 이용해도 되고)
이렇게 한 결과는 다음과 같다
<input value='korea' type='text'>

암튼 문제는 이런 것이다..
원래 라디오 버튼 사용은 다음과 같이 한다
<input type='radio' name='onandoff' value='on'>
<input type='radio' name='onandoff' value='off'>
위와 같이 name 속성을 똑같은 것으로 지정하면 서로 관계를 갖게 되고, 베타적으로 작동(선택)을 할 수 있다

여기서, 위의 라디오버튼들을 생성해보자 (createElement 를 이용해서)

var radio1 = document.createElement('input');
var radio2 = document.createElement('input');
radio1.type = radio2.type = 'radio';
radio1.name = radio2.name = 'onandoff';
radio1.value = 'on';
radio2.value = 'off';

자 댔다 ㅋㅋ (조심해서 썼으나 틀렸을 수도 있음)

근대 문제가 있다 IE에서!
FF에서는 전혀 문제가 없다 (물론 그를 기반한 넷츠도 문제 없고 오페라 물론 괜찮다)
이상하게도 IE에서는 radio 버튼 생성을 저런식으로 하면 안된다
type 속성까지는 적용되지만 name 속성을 적용한 것이 동작하지 않는다 (일시적인 문제인 것인지 확인해 보기 위해 다른 이벤트를 동작시켜서 name 속성을 변경시켜봤지만 마찬가지였다)
실제로 appendChild 등을 통해 화면에 뿌려보면 name 없는 radio 버튼 처럼 작동을 한다
(베타적인 선택을 하지 못할 뿐만 아니라 아예 선택이 되지 않는다)

MSDN에 따르면, 우리는 이런식으로 라디오 버튼을 생성해야만 한다

var radio1 = document.createElement("<input type='radio' name='onandoff' value='on'>");
var radio2 = document.createElement("<input type='radio' name='onandoff' value='off'>");

오, 뭔가 이런식으로도 만들 수 있구나.. 앞으로도 그냥 이런식으로 만들면 되겠구나.
라고 생각했었다 처음엔..
물론 다른 엘리멘트들도 이런 식으로 생성이 가능하다.
그런데 문제는.
W3C DOM 스펙에 맞지 않는다는 것이다

The W3C DOM spec is supposed to be "the name of the element type to instantiate" (e.g., createElement('input'))

심지어 FF에선 작동하지 않고

Raises an INVALID_CHARACTER_ERR error if the specified name contains an illegal character.

throw 한다..

이밖에 IE..에 실망한 많은 경우들을 열거하면서 불평하고 싶지만.. 일단 해결책을 찾아보자.

내가 이 문제에 대해 사용햇던 방법은 다음과 같다 (try ~ catch)

try {
  var radio1 = document.createElement("<input type='radio' name='onandoff'>");
  var radio2 = document.createElement("<input type='radio' name='onandoff'>");
}
catch (e) {
  var radio1 = document.createElement('input');
  var radio2 = document.createElement('input');
  radio1.type = radio2.type = 'radio';
  radio1.name = radio2.name = 'onandoff';
}
radio1.value = 'on';
radio2.value = 'off';

음 FF, IE, Opera, Netscape에서 제대로 동작하는걸 확인했는데
버전 따라서 안될지도 모르겠고, Safari에서는 확인해보지 못했다.
다른 방법으로는 애초에 appendChild 메소드를 사용 안하고 innerHTML 속성을 사용하는 방법도 있다


ps. 여담이지만..
radio button 속성중 베타적 선택을 가능케하는 name 이 없을 경우..
각각의 브라우저가 다르게 반응한다 -.-
IE6: 위에도 적었지만 아예 선택(checked)자체가 되지않는다
FF2: 한개 한개 다르게 선택이 된다, 즉 4개를 만들면 4개다 선택이 가능하다.
Opera8: 마치 name이 없는 것으로 그룹화된 것 처럼 정상적으로 베타적 작동(선택)을 한다

AND

티스토리툴바