html - 单击链接时如何更改内联 css 样式？

Question

我有一个用内联隐藏的表单 style="display: none;"

当点击页面上的链接时，如何动态地将此样式更改为 style="display: inline;"？

Answer 1

很简单

<a href="#" onclick="document.getElementById('myform').style.display = 'inline';">Click me</a>

更新

---

jQuery是一个轻量级的 JavaScript 库，可以做很多很酷的事情，开发人员编写的脚本非常少。

首先，我建议您阅读“How jQuery works?”，其中包含开始使用 jQuery 所需的一切内容。

---

我将解释我在 fiddle 中编写的代码。

首先是链接&表格

<a id="linktotoggle" href="#">Click Me</a>
<form id="formtotoggle"></form>

记住上面链接和表格中的 id。这就是我们在脚本中选择元素的方式，就像 document.getElementById() 所做的那样。

让我们默认隐藏表单

#formtotoggle { display: none; }

现在让我们写jquery

$(document).ready(function() {
// ^ This is an event, which triggers once all the document is loaded so that the manipulation is always guaranteed to run.
   $("#linktotoggle").click(function() {
   // ^ Attach a click event to our link
        $("#formtotoggle").toggle();
        // ^ select the form and toggle its display

   });
});

希望这足以让您入门。