JavaScript是一種常用的編程語言,可以用于控制CSS3的偽類。CSS偽類是指在CSS中定義的一些虛擬元素,它們不是實際存在的HTML標簽,但能夠模擬出一些真實元素的效果。比如,可以通過:hover偽類控制鼠標懸停時元素的樣式變化,通過:active偽類控制鼠標點擊時元素的樣式變化。
/* CSS代碼 */ button:hover{ color: red; } /* JavaScript代碼 */ var btn = document.querySelector('button'); btn.addEventListener('mouseover', function(){ this.style.color = 'red'; });
上述代碼中,通過CSS使用:hover偽類控制button元素的樣式,鼠標懸停時文字變為紅色。而通過JavaScript使用事件監聽器,當鼠標懸停在button元素上時,也可以實現同樣的效果。
/* CSS代碼 */ p:nth-child(odd){ background-color: #ccc; } /* JavaScript代碼 */ var ps = document.getElementsByTagName('p'); for(var i=0; i<ps.length; i++){ if(i%2 == 0){ ps[i].classList.add('odd'); } }
上述代碼中,通過CSS使用:nth-child(odd)偽類控制奇數行的p元素背景顏色為灰色。而JS使用classList對奇數行的p元素添加odd類,從而實現同樣的效果。
上一篇html5表格用什么代碼
下一篇js接收css值