css - 使用 onclick="" 更改 CSS

Question

你能告诉我我做错了什么吗？单击链接时，我想更改 CSS 属性。

在这里找到了这个建议，但对我不起作用。

HTML

<a href="#" onclick="$('.action').css('display', 'block');">Edit</a>
<div class="action action_2">
   <ul>
      <li><a href="#">bearbeiten</a></li>
      <li><a href="#">löschen</a></li>
   </ul>
</div>

CSS：

.button .action {
    position: absolute;
    padding:15px;
    display: none;
    background: #fff;
}

score 2 · Accepted Answer

如果你使用 jQuery，试试这个。

<script>
$(document).ready(function() {
    $('#link').click(function(e) {
        e.preventDefault();
        $('.action').css('display', 'block');
    });
});
</script>

在您的 HTML 中。

<a href="#" id="link">Edit</a>

score 2 · Accepted Answer

您的问题是您提供的onclick是函数调用而不是函数引用。您的浏览器需要后者。

合适的方式

// Javascript
function foo(e) {
    // do stuff, like set the CSS on some elements.  Note 
    // that the 'e' argument is going to be a browser event, 
    // not the element you're changing.
}

// HTML
<div onclick=foo>
// This passes a reference to a function.  Your browser then
// calls foo with an argument of the browser event that was triggered.

错误的方法

// Javascript
function bar(element) {
    // do stuff on the *element* argument.
}

// HTML
<div onclick=bar(someDiv)>
// This is wrong because *bar(someDiv)* isn't a reference to 
// the function, it's a call to run the function with an argument 
// of *someDiv*.  onclick isn't expecting this, so the behavior 
// you'll get will be not what you expect.

您使用的细节$('.action').css('display', 'block');是函数调用，而不是引用。您的浏览器正在尝试这样做($('.action').css('display', 'block'))(clickEvent)，这根本不对。因此，您可以将您的匿名函数包装$('.action').css('display', 'block');在一个匿名函数中，以使其按照浏览器期望的方式工作：

<div onclick="function(e) {$('.action').css('display', 'block');}">

另请注意$().show()，这可能是一个方便您使用的函数，而不是手动设置 CSS 属性。 还可以考虑为您的 HTML 元素添加一个 ID，然后使用 JQuery 为该 ID 附加一个 onclick 处理程序（即$().click()）。

score 1 · Accepted Answer

我会删除内联 JS 并尝试这样的事情：

$('a').click(function() {
    $('.action').css('display', 'block');
});

使用也可以实现相同的$('.action').show();目的。

这是一个例子：

http://jsfiddle.net/pqHeM/1/

score 0 · Accepted Answer

将操作移动到您的 JS 文件：

$(document).ready(function() {
    $('a').on('click', function(e) {
        e.preventDefault();
        $('.action').css({'display':'block'});
    });
});

css - 使用 onclick="" 更改 CSS

4 回答 4

合适的方式

错误的方法

Related

Reference