Изменить непрозрачность изображения с помощью javascript

Ответ 1

Предположим, что вы используете простой JS (см. другие ответы для jQuery), чтобы изменить непрозрачность элемента, напишите:

var element = document.getElementById('id');
element.style.opacity = "0.9";
element.style.filter  = 'alpha(opacity=90)'; // IE fallback

Ответ 2

Вы можете использовать CSS для установки непрозрачности, а не использовать javascript для применения стилей к определенному элементу в DOM.

.opClass {
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}

Вместо использования (например) jQuery для изменения стиля:

$('#element_id').addClass('opClass');

Или с простым javascript, например:

document.getElementById("element_id").className = "opClass";

Ответ 3

На самом деле вам нужно использовать CSS.
document.getElementById("myDivId").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");

Он работает на FireFox, Chrome и IE.

Ответ 4

Вы можете использовать jQuery animate или fadeTo.

Ответ 5

Я не уверен, что вы можете сделать это в каждом браузере, но вы можете установить свойство css указанного img.
Попробуйте работать с jQuery, что позволяет сделать css изменения намного быстрее и эффективнее.
В jQuery у вас будут варианты использования .animate(),.fadeTo(),.fadeIn(),.hide("slow"),.show("slow") например.
Я имею в виду, что этот фрагмент CSS должен сделать для вас работу:

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

Также ознакомьтесь с этим сайтом, где все объясняется далее:
http://www.w3schools.com/css/css_image_transparency.asp

Ответ 6

Вы можете использовать JQuery действительно или простой старый добрый javascript:

var opacityPercent=30;
document.getElementById("id").style.cssText="opacity:0."+opacityPercent+"; filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity="+opacityPercent+");";

Вы помещаете это в функцию, которую вы вызываете в setTimeout, пока не будет достигнута желаемая непрозрачность

Ответ 7

Сначала установите непрозрачность в вашем HTML так:

<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px; opacity:1"></div>

в противном случае это 0 или null

это тогда в моем .js файле

document.getElementById("fadeButton90").addEventListener("click", function(){
document.getElementById("box").style.opacity  =   document.getElementById("box").style.opacity*0.90; });