Работает только прямое назначение стилей CSS. передача через пользовательские переменные не работает. Это синтаксическая ошибка или стили CSS не могут передаваться через определенные пользователем переменные
<!-- 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
не является объектом. Это свойство объекта, и нет возможности напрямую хранить ссылку на свойство.
Итак, когда вы это сделаете:
var d = document.getElementById("ref").style.display;
d = "none";
Все, что вы делаете, это сохранение строки "none"
в переменной d
. Это ничего не значит.
Поскольку style
является объектом, вы можете иметь ссылку на него:
var s = document.getElementById("ref").style;
s.display = "none";
Хотя, кроме изучения того, как все работает здесь, нет никаких оснований вообще использовать промежуточную переменную здесь. Таким образом, вы можете просто упростить код и сделать:
document.getElementById("ref").style.display = "none";
Ссылка, стоящая на чтение: Javascript по ссылке или по значению
Здесь вы устанавливаете значение свойства "display"
в переменной "d"
поэтому "d"
содержит текстовое значение типа "none","block","inline-block" etc.
not object
элемента. поэтому вы не можете установить свойство через переменные.
Это нормально. Это связано со стоимостью и ссылками. Когда вы сделали var d = document.getElementById("ref").style.display;
, вы создали копию значения в новой переменной. Это означает, что style.display
и d
были тогда двумя переменными с просто одинаковым значением. Поэтому после этого, когда вы изменили значение d, значение другой копии оставалось неизменным. Поэтому сценарий 1 не работает, но сценарий 2 работает.
Вот тема Stackoverflow, которая идет гораздо глубже, чем я объяснил: Javascript по ссылке или по значению.