CSS Selector On Onclick Function
Answer :
sure there is a way ;)
The [attribute^=value] selector matches every element whose attribute
value begins with a specified value.
span[onclick^=gotoURL]
Means grab span with attribute onclick which's value is starting with gotoURL.
https://jsfiddle.net/h0qg6nys/
Cheerio :)
edit: vivekkupadhyay was faster...
edit 2: btw. you can check this for selector references https://www.w3schools.com/cssref/css_selectors.asp
edit 3: 30-css-selectors-you-must-memorize
Just clarifying what is happening with the attribute selector.
span[onclick]
selects a span which has anonclick
attribute, regardless of its value.span[onclick="…"]
selects a span whoseonclick
value exactly matches something. That was your error: it didn’t match exactlyspan[onclick^="…"]
selects a span whoseonclick
value begins with something. That is closer to what you were looking for.
The double quotes around the something aren’t always required, but you do need them if the something contains awkward characters such as slashes. It’s always safe to include them.
Modern CSS also includes $=
which ends with a value, and *=
which contains a value. This is not available in Legacy Browsers (ie IE).
CSS is not sophisticated enough (yet) to include more interesting pattern matches, so although you can look for gotoURL
(span[onclick]^=gotoURL
), there is no way to match gotoURL()
.
Just as a side point, you really shouldn’t be using the onclick
property anyway. It’s only there for people who haven’t heard of unobtrusive JavaScript.
Comments
Post a Comment