Question

我知道在HTML中设置不透明度的两种不同方法：

<div opacity="0.5"></div>和

<div style="opacity: 0.5;"></div>

我也知道如何在JavaScript中设置这两个：

div.setAttribute("opacity", 0.5);和

div.style.opacity = 0.5

这两种方法之间有什么重大差异吗？我应该更喜欢一个吗？（我想我至少应该保持一致）

Answer 1

我所知道的唯一opacity 属性是for use with SVGs：

示例元素

以下元素可以使用不透明度属性

Graphics elements [和]   <a> <defs>   <glyph>   <g>   <marker>   <missing-glyph>   <pattern>   <svg>   <switch>   <symbol>

您的<div opacity="0.5"></div>无法在HTML中使用，因此，为了设置HTML元素的样式，应使用CSS控制不透明度。

Answer 2

CSS总是比Javascript快。如果你能用CSS做任何事情，那么为什么要用Javascript浪费时间。

CSS优先级规则表示内联和html属性的顺序高于外部或嵌入式CSS。但是内联CSS不是一种好的做法，直到你的项目因某些原因需要它

正确的CSS不透明度代码：

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

https://css-tricks.com/almanac/properties/o/opacity/

img {
  /* Theoretically for IE 8 & 9 (more valid) */
  /* ...but not required as filter works too */
  /* should come BEFORE filter */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8

  /* This works in IE 8 & 9 too */
  /* ... but also 5, 6, 7 */
  filter: alpha(opacity=50); // IE 5-7

  /* Modern Browsers */
  opacity: 0.5;
}

HTML不透明度属性与CSS不透明度

2 个答案: