Как динамически изменить непрозрачность изображения в Javascript

Question

Я использую следующий код для установки прозрачности изображения в Javascript, но он работает только в Internet Explorer (а в FireFox, Opera, Safari и Google Chrome он остается непрозрачным):

img = new Image();

img.src = "...";

img.style.filter       = "alpha(opacity=75);";
img.style.MozOpacity   = "0.75;";
img.style.opacity      = "0.75;";
img.style.KhtmlOpacity = "0.75;";

Можете ли вы помочь?

Answer 1

Проблема заключается в ; в строке, которая, как предполагается, является частью значения браузером и, следовательно, приводит к неверному числу.

Вы можете просто использовать число для свойства opacity:

img.style.filter       = "alpha(opacity=75);";
img.style.MozOpacity   = 0.75;
img.style.opacity      = 0.75;
img.style.KhtmlOpacity = 0.75;

Answer 2

Не указывайте ; в значении, оно сделает это за вас:)

img = new Image();
img.src = "http://jsfiddle.net/img/logo.png";
img.style.opacity = "0.3";
document.body.appendChild(img);

http://jsfiddle.net/Cdjc6/

Answer 3

Удалите точку с запятой из кавычек следующим образом:

img.style.filter       = "alpha(opacity=75)";
img.style.opacity      = "0.75";

или без кавычек все вместе:

img.style.filter       = "alpha(opacity=75)";
img.style.opacity      = 0.75;

Вы можете увидеть, как это работает здесь: http://jsfiddle.net/jfriend00/tnDaD/

MozOpacity и KhtmlOpacity больше не нужны.Браузеры, которые требовали их, давно ушли из использования.