だから、これはあなたがjQueryを使って陰影やイベントを設定したい方法です:
// `elem` is the element you want to affect
// get opacity
var oldOpacity = $(elem).css('opacity');
// set opacity
$(elem).css('opacity', 0.5);
// add mouseover event
$(elem).on('mouseover', function onMouseOver(e) {
// do stuff with opacities
});
そして、ここでは、あなたがバニラDOMメソッドで上記の操作を行いたい方法は次のとおりです。
// `elem` is the element you want to affect
// get opacity
var oldOpacity = window.getComputedStyle(elem).getPropertyValue('opacity');
// set opacity
elem.style.setPropertyValue('opacity', 0.5);
// add mouseover event
elem.addEventListener('mouseover', function onMouseOver(e) {
// do stuff with opacities
}, false);
要素を取得するにはdocument.getElementById
のような古いDOMメソッドや新しいメソッドdocument.querySelectorAll
とdocument.querySelector
を使用することができます。これは、CSSセレクタを使用してノードまたはノードのリストを返す点でjQueryに非常に似ています。
は、たとえば、クラスlist-item
とli
要素をすべて取得し、それらを反復するために、あなたはこれを行うだろう:
はここで、不透明度をチェックし、更新するための「バニラ」JSの方法です
var elems = document.querySelectorAll('li.list-item');
var i, l = elems.length, elem;
for (i = 0; i < l; i += 1) {
elem = elems[i];
// do stuff with elem
}
jQueryの何かできることは、プレーンJavaScriptで行うことができます。もしあなたがすでにこのためにjQueryコードを作っているのであれば、それを表示するためにあなたの質問を編集することができますか?次に、使用しているjQueryメソッドをバニラJSと同等のものに置き換える方法についてのヒントを示します。 – nnnnnn
1つのセルでそれを行う方法と、それをすべてのセルに適用する方法を理解してください。 – epascarello