我正在尝试编写一个JavaScript脚本,尽可能接近基本的JavaScript概念。我知道我可以用非常小和简单的代码在jQuery中做我想做的事情。我最终会使用jQuery,但现在我想避免使用它。我正在尝试制作一个基本的幻灯片:第一个div应该首先可见,然后在一秒钟后显示下一个div,然后是下一个,依此类推。我也知道我最终需要做一些像setInterval这样的事情,而不是我使用的setTimeout。但我到了那座桥就会过去。
我现在面临的问题是,我似乎无法轻松访问和修改DOM中对象的CSS样式。也许这太复杂了,无法坚持使用基本的JavaScript,如果是这样的话,那么我可以通过创建一个只隐藏或显示元素的类来修改它,然后根据我是想隐藏还是显示元素,将该类包含在各种元素中。但是,如果有一种方法可以从基本JavaScript中访问和编辑CSS,我想学习如何。
以下是我迄今为止尝试过的:
HTML格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Slideshow</title>
<link rel="stylesheet" href="slideshow.css">
</head>
<body>
<div class="wrapper">
<div class="slide1">
<p>.</p>
</div>
<div class="slide2">
<p>..</p>
</div>
<div class="slide3">
<p>...</p>
</div>
</div>
<script src="slideshow.js"></script>
</body>
</html>
div.slide1 {
visibility: visible;
}
div.slide2 {
visibility: hidden;
}
div.slide3 {
visibility: hidden;
}
JavaScript语言
var s1 = document.getElementsByClassName('slide1')[0];
var s2 = document.getElementsByClassName('slide2')[0];
var s3 = document.getElementsByClassName('slide3')[0];
s1 = getComputedStyle(s1);
s2 = getComputedStyle(s2);
s3 = getComputedStyle(s3);
console.log(s1);
console.log(s1.visibility);
setTimeout(function() {
if (s1.visibility === "visible") {
s1.visibility = "hidden";
s2.visibility = "visible";
}
}, 1000);
NoModificationAllowedError: Modifications are not allowed for this document
有没有人能提出一种解决这个错误的方法,或者一种使用JavaScript编辑CSS样式的不同方法?
How to make a slideshow in javascript
