2016-04-23 7 views
0

私はここでプログラミングに慣れているので、この質問が非常に基本的で答えがすでにある場合は事前にお詫び申し上げます。私は多くの検索をしましたが、必要な情報を見つけることができませんでした。JavaScriptを使用して不透明度を保存、変更、および更新する

divの現在の不透明度値を取得し、その値を更新し、更新された値を同じdivに再適用するために使用できるJavaScriptコードは何ですか?本質的には、私はmouseoverイベントで大きなグリッド内の個々のdivの不透明度を徐々に増加させる練習をしています。グリッド内の各divは、マウスがそのdivに入る度に不透明度が1になるまで、不透明度が0.1増加するはずです。

私はすでにjQueryでこれを行う方法を知っています。 JavaScriptの知識を現時点で拡大しようとしています。

+0

jQueryの何かできることは、プレーンJavaScriptで行うことができます。もしあなたがすでにこのためにjQueryコードを作っているのであれば、それを表示するためにあなたの質問を編集することができますか?次に、使用しているjQueryメソッドをバニラJSと同等のものに置き換える方法についてのヒントを示します。 – nnnnnn

+0

1つのセルでそれを行う方法と、それをすべてのセルに適用する方法を理解してください。 – epascarello

答えて

2

だから、これはあなたが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.querySelectorAlldocument.querySelectorを使用することができます。これは、CSSセレクタを使用してノードまたはノードのリストを返す点でjQueryに非常に似ています。

は、たとえば、クラスlist-itemli要素をすべて取得し、それらを反復するために、あなたはこれを行うだろう:

はここで、不透明度をチェックし、更新するための「バニラ」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 
} 
+0

助けてくれてありがとう! – kirby3021

+0

@ kirby3021答えを受け入れることを忘れないでください – PitaJ

+0

リマインダーのおかげで、まだスタックオーバーフローに新しい – kirby3021

0

これはブラウザでのみ機能するという警告です。ノードにドキュメントがないため、NodeJSでは動作しません。このページでは、開発ツール(Chromeで右クリック、検査、コンソール)を開いて試すことができます。

var div = document.querySelector('.post-text') 
console.log(div.style.opacity) // "" 
div.style.opacity = 0.5 
console.log(div.style.opacity) // "0.5" 

だからあなたの練習のために、あなたはとてもようにマウスオーバー機能を割り当てたいでしょう:

function changeOpacity (element, delta) { 
    element.style.opacity = Number(element.style.opacity) + Number(delta) 
} 
var element = document.querySelector('.post-text') 
var opacityDelta = -0.1 
document.onmouseover = function() { changeOpacity(element, opacityDelta) } 
+0

助けてくれてありがとう! – kirby3021

0

を、私はそれがこれらのコード行で動作するようになりました。

with vanilla Js。

私もコメントしました。

// Vanilla Js. 
 

 
//Getting elements. 
 

 
var box = document.querySelector('.box'); 
 

 
var refresh = document.querySelector('.refresh'); 
 

 
// Assigning opacity 
 

 
var defaultOpacity = 0.2; 
 

 
box.style.opacity = defaultOpacity; 
 

 

 
// Events. 
 

 
// Opacity adding event on hover 
 

 
box.addEventListener('mouseover', function(e){ 
 
    var oldOp = e.target.style.opacity; 
 

 
    oldOp = Number.parseFloat(oldOp); 
 
    
 
    oldOp += defaultOpacity; 
 
    
 
    e.target.style.opacity = oldOp; 
 
    
 
}, false); 
 

 
//Refresh Evet. 
 

 
refresh.addEventListener('click', function(e){ 
 
    box.style.opacity = defaultOpacity; 
 
});
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <style> 
 
    .box { 
 
     background: #48A64C; 
 
     height: 100px; 
 
     width: 100px; 
 
     margin-bottom: 20px; 
 
    } 
 
</head> 
 
<body> 
 
    
 
    <div class="box"></div> 
 
    
 
    <p> Yeah you can refresh too </p> 
 

 
    <button class = "refresh">refresh</button> 
 

 
</body> 
 
</html>

+0

助けてくれてありがとう! – kirby3021

関連する問題