Question

我试图在页面加载后添加类，因此添加的类的转换可以更改元素的高度和不透明度，但我仍然无法使其正常工作。

html文件：

LinkableVertex<A<?>>

css文件：

<head>
  <script>
    window.onload = function {
      document.getElementById('home-id').className='home-class';
    };
  </script>
</head>

你能否告诉我我做错了什么，谢谢你。

编辑：我只是补充一点，问题不在于#home-id { transition: opacity 1.5s ease-in-out 0s; height: 0.0em; opacity: 0.6; } html:hover #home-id { transition: opacity 1.5s ease-in-out 0s; opacity: 1; } .home-class { transition: height 1s ease-in-out 0s, opacity 1.5s ease-in-out 0s; height: 40em; opacity: 1; }，而在于特异性。

Answer 1

您可以使用classList：

// div is an object reference to a <div> element with class="foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");

// if visible is set remove it, otherwise add it
div.classList.toggle("visible");

//  add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );

alert(div.classList.contains("foo"));

div.classList.add("foo","bar"); //add multiple classes

它比使用className属性更具灵活性。

onload方法的功能应该是：

window.onload = function() {
  document.getElementById('home-id').className='home-class';
};

您错过了()的{{1}}。

MDN：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Answer 2

我为此使用 jQuery 。只需在HTML文件中链接http://www.code.jquery.com的最新版本，然后使用以下代码：

$(document).ready(function() { //The following block of code will be executed when the page finishes to load.
   $("#home-id").addClass("home-class"); //This line adds the class "home-class" to the element with the id "home-id"
});

如果您不熟悉jQuery，我建议您查看codecademy jQuery课程。（https://www.codecademy.com/learn/jquery）jQuery非常轻巧，易于使用且易于学习。

为什么没有应用CSS类（使用JavaScript onload）？

2 个答案: