控制台不工作，功能开始迟到

Question

这就像 javascript 不尊重 css 中的样式定义，只尊重 javascript 本身在 css 中所做的更改：

<body onload="fader()">

    <img id="ssio" src="../images/slideshow/1.jpg" alt="slideshow" style="width:100%;height:80%;" />
    <img id="ssie" src="../images/slideshow/2.jpg" alt="slideshow" style="width:100%;height:80%;" />

<!--css work-->

<style>

img#ssio{
    transition:opacity 1s;
    position:absolute;
    opacity:1;
    margin:0;
    padding:0;
}
img#ssie{
    transition:opacity 1s;
    opacity:0;
    margin:0;
    padding:0;
}

</style>

<!--js work-->

<script>

function fader() {
    console.log(document.getElementById("ssio").style.opacity, document.getElementById("ssie").style.opacity, ",", ssion, ssien)
    document.getElementById("ssio").style.opacity = document.getElementById("ssie").style.opacity;
    document.getElementById("ssie").style.opacity = 1 - document.getElementById("ssio").style.opacity;
    setTimeout(fader, 4000);
}

</script>
</body>

为什么没有按预期工作？为什么console和js把css中定义的opacity当成null？我该如何解决？

Answer 1

你的函数有一些问题：

首先，你忘了定义什么是变量ssion和ssien，这就是为什么控制台没有写入日志的原因。

第二个问题是 JavaScript 不查看样式表中的属性（但是它查看内联样式中的属性）。因此，由于最初加载文档时，您没有在行内样式中定义不透明度，因此 document.getElementById("ssie").style.opacity 没有值，这意味着在您的函数的第一个运行之后，您将最终设置不透明度ssie 到 1.

您可以阅读主题 How do I get the opacity of an element using Javascript? 的答案，了解有关如何解决此问题的更多信息。

但是，在我看来，正确的做法实际上是使用 display 或 visibility CSS 属性。你可能想查一查。

控制台不工作，功能开始迟到

console not working and function starts working late

html

javascript

css

console