这就像 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>
为什么它没有按预期工作？ 为什么控制台和js将css中定义的不透明度视为null？ 我该如何修复它？
最佳答案
您的函数存在一些问题:
首先，您忘记定义什么是变量 ssion 和 ssien，这就是控制台中没有写入日志的原因。
第二个问题是 JavaScript 不查看样式表中的属性(但是它查看内联样式中的属性)。因此，由于最初加载文档时，您还没有在内联样式中定义不透明度，因此 document.getElementById("ssie").style.opacity 没有值，这意味着第一次运行后在您的函数中，您最终会将 ssie 的不透明度设置为 1。
您可以阅读主题How do I get the opacity of an element using Javascript?的答案有关如何解决此问题的更多信息。
但是，在我看来，正确的方法实际上是使用 display 或 visibility CSS 属性。您可能想查找它们。
关于javascript - 控制台不工作并且功能开始工作较晚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32243676/