2017-03-17 40 views
0

有沒有辦法讓onclick + function()上的CSS選擇器?你可以在onclick上得到它。onclick函數上的CSS選擇器

下面是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()"] 
+2

試試這個'span [onclick * =「gotoURL」]' – vivekkupadhyay

+0

我是gonne測試了一下,但乍一看它就像一個魅力。 – Flummox

回答

4

肯定有辦法;)

The [attribute^=value] selector matches every element whose attribute value begins with a specified value.

span[onclick^=gotoURL] 

指搶跨度屬性的onclick它的值是開始gotoURL。

https://jsfiddle.net/h0qg6nys/

Cheerio :)

編輯: vivekkupadhyay是快...

編輯2: BTW。你可以檢查此爲選擇引用https://www.w3schools.com/cssref/css_selectors.asp

編輯3:30-css-selectors-you-must-memorize

+1

是的,但他們無法解釋它,更不用說發佈一個完整的答案。所以你得到了投票。 – BoltClock

+1

實際上並不認爲他需要*選擇器*解決方案,順便說一句很好的解釋:) – vivekkupadhyay

0

你不應該焦點添加樣式可能? 它可能會工作。或爲一個積極的。

span:focus, 
span:active{ 
    color: blue; 
    text-decoration: underline; 
} 
1

只是澄清什麼與屬性選擇發生。

  • span[onclick]選擇哪個具有一個onclick屬性,不管其值的跨度。
  • span[onclick="…"]選擇一個範圍,其onclick正好匹配的東西。這是你的錯誤:它不完全匹配
  • span[onclick^="…"]選擇一個範圍,其onclick開始與東西。這更接近你正在尋找的東西。

現代CSS還包括$=,其結束用的值,並且其中*=包含的值。這在傳統瀏覽器(即IE)中不可用。

CSS還不夠複雜(尚未包含)更有趣的模式匹配,所以雖然您可以查找gotoURLspan[onclick]^=gotoURL),但無法匹配gotoURL()

正如一個方面,你真的不應該使用onclick財產無論如何。只有那些沒有聽說過不引人注意的JavaScript的人才會去。