html id를 변경하는 것이 좋습니다.

예를 들어, id가 "foo1Closed"인 div가 있습니다. 'foo1Closed'를 클릭하면 div 내에서 요소 (예 : 높이, 너비, 색상, 가시성 등)를 변경할 수 있습니다.html id를 변경하는 것이 좋습니다.

내가 수행 한 한 가지 방법은 내 .css 파일의 각 요소에 대해 두 가지 스타일을 코딩하는 것입니다. 예를 들어, "foo1Closed"및 "foo1Opened"에 대해 하나의 스타일이 있습니다. 마찬가지로 :

#foo1Closed { 
    visibility:hidden; 
} 
#foo1Opened { 
    visibility:visible; 
}

그때처럼,이 ID를 변경하려면 자바 스크립트 기능을 사용 :이 방법 잠재적 인 단점이가 인 경우, 누군가가 대답 할 수 바라고 대한 인식입니다 때문에

document.getElementById("foo1Opened").id = "foo1Closed";

내가 대신 스타일을 수정해야하는 경우 "괜찮아"방법과 같이 직접 자바 스크립트를 통해 상호 작용을 수행하거나하기 :

document.getElementById("foo1Opened").style.visibility = "hidden";

물론, 하나 개의 솔루션보다 CSS 코드와 O를해야 할 것입니다 ne는 더 많은 JavaScript 코드를 갖게 될 것입니다. 내가 아는 바는, 어느 것이 더 효과적인지 (성능 및/또는 프로젝트의 모델링에 관한 한).

Reworded question : ID는 특정 객체를 식별하는 데 사용되므로 (일반적으로 변경해서는 안됨을 의미 함) ID를 편집하지 않고도이를 수행 할 수있는 다른 방법이 있으며 JavaScript를 통해 모든 요소를 수동으로 변경하지 않아도됩니다 ?

출처

2013-07-08 Phas1c

당신의 더 잘 사용하는 CSS 클래스의 클래스 명 속성을 사용해야합니다. – Jack

기술적 인 관점에서 보면 아무 문제가 없습니다. 당신은 그것을 할 수 있고 그것은 작동 할 것입니다. 그러나 일반적으로 ID가 아니라 클래스로 수행됩니다. – j08691

아니 당신은 클래스

#foo1.closed { 
    visibility:hidden; 
} 
#foo1.opened { 
    visibility:visible; 
} 

document.getElementById("foo1").setAttribute("class","closed"); 
document.getElementById("foo1").setAttribute("class","opened");

를 사용한다 또는 당신이 위에 기능을 구축 할 수 있습니다 (하지만 내 코드를하지 않는 전역의 사용 방지)

... CSS ... 

var foo1 = document.getElementById("foo1"); 

var openFoo = function() { 
    foo1.setAttribute("class","opened") 
} 
var closeFoo = function() { 
    foo1.setAttribute("class","closed") 
}

출처

2013-07-08 20:27:18 niahoo

@ Simon Verhoeven이 말했듯이, jQuery는 DOM 조작의 이런 유형에 완벽하게 어울립니다. – niahoo

이것은 아주 좋은 것처럼 보입니다. 따라서 CSS 내에서 스타일을 변경하는 것은 좋은 습관이지만 ID를 변경하는 대신 클래스를 사용하고 속성을 설정합니다. 고마워, 정확히 내가 찾던 답변 유형! – Phas1c

jQuery에는 .show() 및 .hide() 메소드가 있습니다. – niahoo

내 개인적인 취향은 jQuery를 사용하여 ID를 변경하는 대신 클래스를 추가하는 것입니다. 후자를 수행하는 것은 더 많은 효과를 얻으려고 할 때 줄을 고민하는 것입니다. 의 라인을 따라

뭔가 :

$("#foo1").removeClass("class1").addClass("class2");

아니면 조건을 달성하고자하지만.

출처

2013-07-08 20:24:46

클래스 (또는 ID)를 변경하기 위해 jQuery와 같은 전체 라이브러리를 사용하는 것은 조금 지나치게 잔인한 것처럼 보입니다. 그렇습니까? – j08691

@ j08691 그게 전부라면. 하지만 제가 말했듯이, 그것은 제 개인적인 취향이고 저는 다른 목적으로 jQuery를 사용하고 있습니다. –

멋지고, 빠르고 간단한 솔루션입니다. 나는 신분증 경로가 지저분한 생각이었다고 생각하고 있었다. 나는 그 질문에 기뻐했다. 도와 줘서 고맙다! – Phas1c

-1

당신은 당신이 대신 ID의 클래스를 변경하고, 표시하거나 그것의 클래스에 따라 요소를 숨기도록 스타일로 설정할 수 클래스,하지 IDS

출처

2013-07-08 20:25:05

그 이유는 무엇입니까? – j08691

분명히 클래스가 thigs를 한정하기 위해 만들어졌고 id가 그들을 확인하기 위해 만들어 졌기 때문에. – niahoo

를 사용해야합니다.

출처

2013-07-08 20:25:52 FMB89

나는 요소의 ID를 변경하면 "괜찮습니다"라고 말하고 싶지만 동의하지 않을 것입니다. id의 목적은 요소를 식별하는 것입니다. 따라서 ID를 변경하면 실제로 요소가 변경됩니다.

id를 변경하는 대신 클래스를 추가하고 제거하지 않는 것이 좋습니다.

의미 론적 관점에서 페이지의 특정 부분의 속성을 변경하므로 클래스를 변경하는 것이 더 적합합니다.

출처

2013-07-08 20:26:08 Schleis

시간이 지남에 따라 변하지 않아야하는 고유 식별자로 요소의 ID를 생각해보십시오. CSS 클래스는 시간 경과에 따라 변경 될 수있는 요소에 대한 설명이나 메타 데이터를 나타냅니다.

출처

2013-07-08 20:26:37 Matt

빠른 및 더러운 대답 : 아니요, ID를 변경하는 것은 매우 안 좋은 일입니다.

ID는 입니다. ID는입니다. 요소의 스타일을 가리키는 ID를 사용해서는 안됩니다. 그렇게하는 것은 의미론이 아니며 리팩토링 프로세스를 어렵게 만듭니다. 나는 당신이 HTML/JS/CSS로 시작한다는 것을 알고있다. 그러나 이것은 알아야 할 중요하다. :)

질문에 설명 된 목적에 가장 적합한 것은 클래스를 사용하는 것이다. 예를 들어 :

.opened { 
    visibility: visible; 
} 
.closed { 
    visibility: hidden; 
} 

<div id="foo1" class="opened"></div>

그런 다음, 자바 스크립트 ...

document.getElementById("foo1").setAttribute("class", "opened"); 
document.getElementById("foo1").setAttribute("class", "closed");

출처

2013-07-08 20:32:21 gustavohenke

당신 은 "ID"속성을 변경하지 마십시오.

대신 "class"속성을 사용하십시오. 예를 들어

:

<style type='text/css'> 
    div.closed { 
     display:none; 
    } 
    div.opened { 
     display:inline; 
    } 

</style> 

<div id="foo1" class="opened">...</div>

당신의 자바 스크립트 함수에서는 다음을 사용 :

var foo1 = document.getElementById("foo1"); 

    foo1.className="closed";

시도는이 방법으로 클래스 속성을 변경하는 것을 방지하기 위해 :

문서를. getElementById ("foo1"). setAttribute ("class", "closed");

당신은 DOM 요소

출처

2013-07-08 20:41:45 ESt3b4n

html id를 변경하는 것이 좋습니다.

답변

관련 문제