CSS кросс-браузерная непрозрачность от Javascript

Question

Я хочу уменьшить прозрачность элемента, когда пользователь выполняет действие.

Текущий код, который у меня есть:

document.getElementById('MyOpaqueElement').style.opacity = 0.3;
// There are checks in the real code for NULL, etc.

Это работает в Firefox, Safari и т. Д. IE8 имеет разные представления о непрозрачности. Я прочитал пару статей, но еще не нашел однозначного ответа на самый переносимый метод для кроссбраузерной работы.

Answer 1

РЕДАКТИРОВАТЬ - Плакат использует jquery ..

Простой способ:

  $(el).css('opacity', '0.3');

(Я проверил источники jquery, и он автоматически обрабатывает непрозрачность для совместимости с разными браузерами, поэтому должен работать)

Или для решения CSS: Просто дайте ему класс, например «Прозрачный», и добавьте это в свой файл CSS:

.transparent {
    filter: alpha(opacity=30); /* for IE */
    -khtml-opacity: 0.3;      /* khtml, old safari */
    -moz-opacity: 0.3;       /* old mozilla, netscape */
    opacity: 0.3;           /* good browsers: FF, safari, opera */
}

Answer 2

Существуют различные специфичные для браузера настройки и нотации, которые необходимо учитывать.

См. Quirksmode.org: CSS2 - Непрозрачность

Я предлагаю использовать Framework, такой как JQuery , Прототип , MooTools или Dojo . Я знаю, что на первый взгляд смешно добавлять десятки килобайт кода просто для непрозрачности, но это действительно того стоит. Это просто работает один способ для всех браузеров.

Answer 3

Эквивалент должен быть document.getElementById('MyOpaqueElement').style.filter = 'alpha(opacity=30)';

Кстати, даже если вы не используете такие библиотеки, как YUI или JQuery, вы можете загрузить их и найти в их источниках слово

Непрозрачность

.

Answer 4

Это можно сделать с помощью jquery. Проверьте следующее сообщение о переполнении стека:

Изменение непрозрачности Jquery