Как уменьшить непрозрачность CSS - PullRequest
Новая
       6

Как уменьшить непрозрачность CSS

0 голосов
/ 04 июня 2011

Мне нужна чистая функция JavaScript, которая находит текущую непрозрачность HTML-элемента и уменьшает ее на 10%.Есть ли какое-нибудь эффективное кросс-браузерное решение?

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

Ответы [ 3 ]

1 голос
/ 04 июня 2011

с вариацией IE 

var style = document.getElementById(...).style;
if(browserIsIE) {
  var regExpResult = /alpha\(opacity\s*=\s*(\d*)\s*\)/.exec(style.filter);
  var opacity;
  if(regExpResult && regExpResult.constructor == Array && regExpResult[1] && opacity = parseInt(regExpResult[1])) {
    style.filter = "alpha(opacity = " + (opacity - 10) + ")";
  } else {
    style.filter = "alpha(opacity = 90)"; 
  }
} else {
  style.opacity = style.opacity=='' ? 0.9 : parseFloat(style.opacity)-0.1;
}
0 голосов
/ 04 июня 2011

Я достиг этого прогресса до сих пор.Можете ли вы проверить или настроить его? 

function normOpacity(num,ie) {
  num = parseFloat(num);
  if(num<0) return 0;
  if(num>1 && !ie) return 1;
  if(num>100 && ie) return 100;
  return num;
}

function changeOpacity(obj,diff) {
  if(!obj) return;
  if(!obj.filters) {
    var gcs = document.defaultView.getComputedStyle(obj,null);
    var op = parseFloat(gcs.getPropertyValue("opacity")) + diff;
    return obj.style.opacity = normOpacity(op)+"";
  }
  if(!obj.style.zoom) obj.style.zoom = 1;
  var op, al, dx = "DXImageTransform.Microsoft.";
  try { al = obj.filters.item(dx+"Alpha"); } catch(e) {}
  if(!al) try { al = obj.filters.item("Alpha"); } catch(e) {}
  if(!al) {
    var op = normOpacity(100+100*diff,true);
    return obj.style.filter+= "progid:"+dx+"Alpha(opacity="+op+")";
  }
  try { op = al["Opacity"]; } catch(e) { op = 100; }
  al["Opacity"] = normOpacity(parseInt(op)+100*diff,true)+"";
}

использование 

changeOpacity(obj,-0.1); // opacity should be 10% lower, regardless the browser
0 голосов
/ 04 июня 2011 
var style = document.getElementById(...).style;
style.opacity = style.opacity=='' ? 0.9 : parseFloat(style.opacity)-0.1;

Возможно, возвращаемое значение нужно вручную привести в строку, я забыл.

...