onclick 函数上的 CSS 选择器

Question

有没有办法在 onclick + function() 上获取 CSS 选择器？您可以在 onclick 上获取它。

这是 HTML：

 <span onclick="gotoURL(&quot;https://youtu.be/dQw4w9WgXcQ&quot;);">Rick Roll</span>

CSS：

 span[onclick] {
    color: blue;
    text-decoration: underline;
}

但这些不起作用：

 span[onclick="gotoURL"]

span[onclick="gotoURL()"]

原文由 Flummox - don‘t be evil SE 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

肯定有办法 ;)

[attribute^=value] 选择器匹配属性值以指定值开头的每个元素。

 span[onclick^=gotoURL]

意味着抓取带有属性 onclick 的跨度，其值以 gotoURL 开头。

https://jsfiddle.net/h0qg6nys/

干杯 :)

编辑： vivekkupadhyay 更快…

编辑 2： 顺便说一句。你可以检查这个选择器参考 https://www.w3schools.com/cssref/css_selectors.asp

编辑 3: 30-css-selectors-you-must-memorize

原文由 MarcelD 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

只是澄清属性选择器发生了什么。

• span[onclick] 选择一个 具有 onclick 属性的跨度，无论其值如何。
• span[onclick="…"] 选择一个跨度，其 onclick 值与某些东西 完全 匹配。那是你的错误：它不完全匹配
• span[onclick^="…"] 选择一个跨度，其 onclick 值以某物 _开头_。这更接近你正在寻找的东西。

something 周围的双引号并不总是必需的，但如果 something 包含斜杠等笨拙的字符，则确实需要它们。包括它们总是安全的。

现代 CSS 还包括 $= 以一个值 _结尾_，以及 *= 包含 一个值。这在旧版浏览器（即 IE）中不可用。

CSS 还不够复杂，无法包含更多有趣的模式匹配，因此尽管您可以查找 gotoURL ( span[onclick]^=gotoURL )，但无法匹配 gotoURL() 。

附带一点，您真的不应该使用 onclick 属性。它只适用于那些没有听说过不显眼的 JavaScript 的人。

原文由 Manngo 发布，翻译遵循 CC BY-SA 4.0 许可协议