Как добавить альфа-фильтр к любому элементу HTML и сохранить другие фильтры в IE?

Question

Если у меня есть этот HTML

<img src="aaa.png" id="a" style="filter: alpha(opacity=100)"/>

Тогда этот JavaScript работает в IE6

document.getElementById("a").filters.alpha.opacity = 60;

Но если стиль не установлен

<img src="aaa.png" id="a" style=""/>

JavaScript выдает ошибку 'filters.alpha' равно нулю или не является объектом

Этот код работает

document.getElementById("a").style.filter = "alpha(opacity=60)";

Но тогда другие фильтры, примененные к изображению, будут перезаписаны. Итак, вопрос: Как добавить альфа-фильтр к любому элементу HTML и сохранить другие фильтры в IE?

edit Я бы хотел решение для чистого javascript (не jQuery)

Answer 1

К сожалению, мне кажется, что вы можете добавлять новые элементы только через свойство style.filter, с filters вы можете манипулировать только уже существующими.

filter - это объект коллекции, здесь вы можете найти документы: filters Collection . Это дает вам хороший и простой способ играть с вашими существующими фильтрами, вы можете включать и выключать их (enabled) и т. Д.

Например, вы можете использовать

obj.filters.item("DXImageTransform.Microsoft.Alpha").opacity=20;

или (если альфа была первой декларацией фильтра)

obj.filters.item(0).opacity=20;

КЛАССЫ

Большую часть времени вам лучше хранить объявления фильтров для определенных классов в вашем CSS и использовать только JS для назначения правильных классов вместо манипулирования значениями style напрямую.

Answer 2

После еще нескольких испытаний я пришел с этим решением

var filter = function(obj,f,params) {
  var found, nf, dx = "DXImageTransform.Microsoft.";

  // check if DXImageTransform.Microsoft.[Filter] or [Filter] filter is set
  try { nf = obj.filters.item(dx+f); found = true; } catch(e) {}
  if(!found) try { nf = obj.filters.item(f); found = true; } catch(e) {}

  // filter is set - change existing one
  if(found) {
    nf.Enabled = true; // if exists, it might be disabled
    if(params) for(var i in params) nf[i] = params[i];
  }

  // filter is not set - apply new one
  else {
    nf = "";
    if(params) for(var i in params) nf+= i.toLowerCase()+"="+params[i]+",";
    if(params) nf = "("+nf.substr(0,nf.length-1)+")";
    obj.style.filter+= "progid:"+dx+f+nf+" ";
  }

  // hasLayout property hack
  if(!obj.style.zoom) obj.style.zoom = 1;
};

Пример

var obj = document.getElementById("a");
if(document.body.filters) filter(obj,"Alpha",{Opacity:50});

Надеюсь, это сработает, если кто-нибудь обнаружит проблему, пожалуйста,скажите мне.

Источники

свойство obj.filters http://msdn.microsoft.com/en-us/library/ms537452(VS.85).aspx

filter.Alpha http://msdn.microsoft.com/en-us/library/ms532967(VS.85).aspx

Answer 3

Вы можете указать n желаемых фильтров, но просто продолжайте добавлять их один за другим через пробел. Например,

STYLE="filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=50)
        progid:DXImageTransform.Microsoft.Alpha(opacity=60);"

Проверьте эту ссылку для более: http://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx

Надеюсь, это ответит на ваш вопрос.