Объекты javascripts не работают для назначения стилей CSS

0

Работает только прямое назначение стилей 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>
Теги:

3 ответа

1
Лучший ответ

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 по ссылке или по значению

1

Здесь вы устанавливаете значение свойства "display" в переменной "d" поэтому "d" содержит текстовое значение типа "none","block","inline-block" etc. not object элемента. поэтому вы не можете установить свойство через переменные.

1

Это нормально. Это связано со стоимостью и ссылками. Когда вы сделали var d = document.getElementById("ref").style.display; , вы создали копию значения в новой переменной. Это означает, что style.display и d были тогда двумя переменными с просто одинаковым значением. Поэтому после этого, когда вы изменили значение d, значение другой копии оставалось неизменным. Поэтому сценарий 1 не работает, но сценарий 2 работает.

Вот тема Stackoverflow, которая идет гораздо глубже, чем я объяснил: Javascript по ссылке или по значению.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню