Question

在我的代码中，我没有找到div“box”的不透明度，如果我调用函数切换它显示为零。

为什么它不应该显示2，因为不透明度是1并且乘以2。

这是我的代码：jsFiddle

<html>
<head>
    <style>
        #box {
            background-color:blue;
            width:100px;
            height:100px;
            opacity:1;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button onclick="toggle()">Toggle</button>
    <script>
        var faded = false;
        var current = document.getElementById("box").style.opacity *2;
        var toggle = function() {
            document.getElementById("box").innerHTML = current;
        }
    </script>
</body>
</html>

Answer 1

通过访问style属性，您只能获得元素的内联样式。您的样式是使用样式表定义的。您需要使用的是getComputedStyle。请注意其compatibility here。

http://jsfiddle.net/ZxRGB/3/

var box = document.getElementById("box");
function toggle() {
    var styles = window.getComputedStyle(box, null);
    var opacity = styles.getPropertyValue('opacity');
    box.innerHTML = opacity * 2;
}

为了使其更加强大，you can do what this guy did。您可以检查style属性中的样式，当它不存在时，请检查样式表。

Answer 2

使用此

var current = document.getElementById("box");
var style = window.getComputedStyle(current);
var opacity = style.getPropertyValue('opacity') * 2;
document.getElementById("box").innerHTML = opacity;

如果你有内嵌样式或通过javascript添加样式，你可以使用.style但是通过css添加getComputedStyle

检查http://jsfiddle.net/raunakkathuria/ZxRGB/1/

无法找到div的不透明度？

2 个答案: