javascript - 定义新的 css 类并在 javascript 中访问其成员

Question

我正在定义一个 css 类，并试图从 javascript 中使用它的成员。结果未定义。我的错误在哪里？

function myFunction() {
  var x = document.getElementById("myId").style.myMember;
  document.getElementById("debug").innerHTML = x;
}

.myClass {
  myMember: 123;
}

<p>Click the button to get the style property of the myId element.</p>

<button onclick="myFunction()">Try it</button>

<p id="debug"></p>

<div id="myId" class="myClass">
  My content.
</div>

example在 w3schools，如果你想尝试的话。

---

一些背景:我正在尝试创建一个非常简单的幻灯片页面。多亏了 w3schools，我找到了一种在 css 中创建幻灯片的方法(抱歉，这是我搜索时最重要的内容)。

现在我希望能够为html文件中的每张幻灯片单独设置显示时间，并且这次如果省略则有一个默认值。

将显示时间作为幻灯片样式的一部分似乎是合理的，至少在我看来是合乎逻辑的。我现在从目前的答案中了解到，无法将 css 样式添加到自定义属性中，对吗？

从这里传递显示时间的正确方法是什么:

<div class="mySlides fade">
   <img src="img.jpg" style="width:100%">
</div>

到这个 javascript 函数？:

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1} 
    x[slideIndex-1].style.display = "block";
    setTimeout(carousel, 500); // Get display time from html instead!
}

Answer 1

首先，element.style 对象将为您提供在该特定元素中内联定义的样式值...

第二个 myMember 不是一个有效的 css 属性，所以它不会给你任何东西......

function myFunction() {
  var x = document.getElementById("myId").style.display;
  document.getElementById("debug").innerHTML = x;
}

<p>Click the button to get the style property of the myId element.</p>

<button onclick="myFunction()">Try it</button>

<p id="debug"></p>

<div id="myId" style="display:block">
  My content.
</div>