2014-02-17 1 views
0

CSS 스타일의 직접 할당 만 작동합니다. 사용자 정의 된 변수를 통해 전달하는 것은 구문 오류 CSS 스타일 또는 사용자 정의 변수CSS 스타일을 할당하는 javascript 객체가 없습니다.

<!-- using variable doesnt work --> 
<body> 
<p id="ref" onclick="display()">hello</p> 
<script> 
function display(){ 
var d = document.getElementById("ref").style.display; 
d = "none"; 
} 
</script> 
</body> 

<!-- direct assignment works --> 
<body> 
<p id="ref" onclick="display()">hello</p> 
<script> 
function display(){ 
document.getElementById("ref").style.display = "none"; 
} 
</script> 
</body> 
style.display
+0

가능한 복제본 [JavaScript가 참조 전달 또는 값어치 언어입니까?] (http://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or) - 값어치 언어 별) – Phil

답변

1

통해 전달 질수 working.Is 객체되지 아니다. 이것은 객체의 속성이며 속성에 대한 참조를 직접 저장할 수있는 방법이 없습니다.

그래서, 당신이 할 때

var d = document.getElementById("ref").style.display; 
d = "none"; 

모두, 당신은 변수 d에 문자열 "none"를 저장하는 일을하고 있습니다. 그것 이상으로 아무것도하지 않습니다.

var s = document.getElementById("ref").style; 
s.display = "none"; 

비록 상황이 모두 여기에 중간 변수를 사용할 이유가 없습니다, 여기에 어떻게 작동하는지 탐구 이외 : style가 객체

때문에, 당신은에 대한 참조를 가질 수 있습니다. 그래서, 당신은뿐만 아니라 단지 코드를 단순화 할 수 있습니다

document.getElementById("ref").style.display = "none"; 

참조 가치가 읽기 : 정상 Javascript by reference vs. by value

1

합니다. 그것은 가치 대 참조와 관련이 있습니다. var d = document.getElementById("ref").style.display;을 만들었을 때 새 변수에 값의 복사본을 만들었습니다. 즉, style.displayd은 단순히 동일한 값을 가진 두 변수였습니다. 그래서 그 후에 d의 값을 변경하면 다른 사본의 값은 변경되지 않았습니다. 시나리오 1은 작동하지 않지만 시나리오 2는 작동합니다.

여기에 설명 된 것보다 훨씬 더 깊은 Stackoverflow 주제가 있습니다 : Javascript by reference vs. by value. 여기

1

당신이 변수 "d"에서 속성 "display"의 값을 설정하는 그래서 "d"은 요소의 "none","block","inline-block" etc.not object 같은 텍스트 값이 포함되어 있습니다. 따라서 변수를 통해 속성을 설정할 수 없습니다.

관련 문제