控制台不工作并且功能开始工作很晚答案

【问题标题】：console not working and function starts working late控制台不工作并且功能开始工作很晚
【发布时间】：2015-11-21 11:59:15
【问题描述】：

就像 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？我该如何解决？

【问题讨论】：

在你身上？
在我的真实代码中它在外部样式表中，我的 js 也是。
@jay 你能解释更多吗？
这只是猜测您可能会得到空值的原因。尝试将.getPropertyValue() 添加到选择器的末尾。
您在主体onload 上有多个setTimeout 函数，这会将页面加载时间增加20 秒。

标签： javascript html css console

【解决方案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 属性。您可能想查找它们。

【讨论】：

好吧，对不起，对于这两个变量，我在我的实际代码中定义了它们，但也忘了在这里复制定义，但是，问题出在那个内联定义上。好吧，我知道是什么使用显示和可见性的优势，关于此代码是幻灯片的一部分，但无论如何，由于跨浏览器不兼容，我现在正忙着用 jQuery 重新编程整个事情。感谢您的时间:)