JavaScript和CSS是現在前端界最常用的兩種編程語言。其中,JavaScript是一門腳本語言,在前端編程中有著非常廣泛的應用。在JavaScript中,有一個非常常用的功能,那就是點擊a標簽后改變其顏色。
// 點擊a標簽后變色 var oLinks = document.getElementsByTagName('a'); for(var i=0, len=oLinks.length; i<len; i++){ oLinks[i].onclick = function(){ this.style.color = 'red'; } }
以上代碼的含義是,用document.getElementsByTagName('a')獲取到所有a標簽,遍歷并給他們添加點擊事件。當點擊事件被執行時,將當前a標簽的顏色設置為紅色。
不過,上面的JavaScript代碼并不能讓a標簽平滑地變色。要想做到這點,我們還需要添加一些CSS樣式。
a { color: #333; transition: all .2s linear; } a:hover { color: red; }
以上CSS代碼的意思是,在默認狀態下a標簽的顏色為#333(也可以是其他任何顏色),同時給他們添加一個0.2秒的過渡動畫,讓變色過程更流暢。當鼠標懸停在a標簽上時,將其顏色設置為紅色,即可實現平滑的變色效果。
綜上所述,JavaScript和CSS能夠配合使用,實現各種酷炫的效果。在前端編程過程中,它們是難以分割的一對好搭檔。
上一篇css里去掉a標簽下劃線
下一篇js css3飄落動畫