跨浏览器透明度Javascript属性

Question

跨浏览器透明度Javascript属性

3

我刚刚读完了这篇文章： https://css-tricks.com/snippets/css/cross-browser-opacity/ 这句（误导性的？）话引起了我的注意： “现在，你真的不必担心透明度在跨浏览器方面是一个困难的问题。只需使用opacity属性，就像这样：”

.thing {
  opacity: 0.5;
}

"

是否不再需要使用以下内容：

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

此外，为什么在老版本的浏览器中很难找到JavaScript属性选择器呢？我只能在这里找到"MozOpacity": http://help.dottoro.com/ljdkioqd.php，以及这里的"filter.alpha"属性: http://help.dottoro.com/ljqtwlbv.php。那khtml属性选择器呢？如果其他选择器仍有用途，那么文章中的说法对我来说就是误导性的。他似乎在暗示所有不同版本的浏览器都支持透明度。我只需要一些澄清（我已经阅读了 StackOverflow 上关于跨浏览器透明度的每一个问题，但没有发现重要的信息）。

<----------------------------- 更新 --------------------------------->

我已经找到了全部的选择器！这里是它们的列表，供需要使用的人参考：

.style.opacity
.style.MsFilter
.style.filter.alpha
.style.MozOpacity
.style.KhtmlOpacity

注意：使用“MsFilter”属性时：

.style.MsFilter = "\"progid:DXImageTransform.Microsoft.Alpha(opacity=1)\"";

- Mangofett

5

在极少数情况下，您可能需要支持IE8，其他浏览器已经淘汰。 - Asons

所以，只是为了澄清一下... MozOpacity 和 khtmlOpacity 在今天完全没有用处，也没有任何目的吗？此外，如果我想使用 Javascript 降低元素的不透明度，我应该使用 document.getElementById("").style.filter.alpha 和 document.getElementById("").style.opacity 来选择两个浏览器中元素的不透明度吗？ - Mangofett

2

使用 document.getElementById("").style.opacity = ...。 - Asons

1

此外，我想建议您现在更多地依赖CSS，而不是在JavaScript中调整元素属性（如不透明度）。尽可能避免这些情况，让CSS来处理它们。 - gdyrrahitis

我完全同意您应该尽可能少地使用Javascript来使您的网站工作，但我制作这个只是作为CSS动画和@keyframe的备用解决方案。对我来说，这样做的目的是让所有<IE10版本都能处理我的动画，其中包括元素随时间改变不透明度值。 - Mangofett

2个回答

1

<----------------------------- 更新 --------------------------------->

我已经找到了所有的选择器！以下是它们，供任何想要使用的人使用：

.style.opacity
.style.MsFilter
.style.filter.alpha
.style.MozOpacity
.style.KhtmlOpacity

注意：使用“MsFilter”属性时，请确保用斜杠取消额外的引号：

.style.MsFilter = "\"progid:DXImageTransform.Microsoft.Alpha(opacity=1)\"";

谢谢大家的帮助/意见！

- Mangofett

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rounin - Standing with Ukraine · Accepted Answer

他让人误以为突然间所有浏览器都支持不透明度了。你可以在这里找到浏览器使用统计数据：http://caniuse.com/#feat=css-opacity caniuse.com估计IE8的全球用户占比为0.63%。其他浏览器（IE7及以下版本，Netscape和Safari 1）未列出。