使用JavaScript存儲，更改和更新不透明度

我是新來的編程新手，所以如果此問題非常基本，並且答案已經在這裏，請提前道歉。我做了很多搜索，但我一直無法找到我需要的信息。使用JavaScript存儲，更改和更新不透明度

可以使用什麼JavaScript代碼來提取div的當前不透明度值，更新該值，並將更新後的值重新應用於同一個div？實質上，我正在做一個練習，涉及逐漸增加mouseover事件中大網格中各個div的不透明度。網格中的每個單獨的div應該在每次鼠標進入該div時增加0.1的不透明度，直到具有不透明度1的點爲止。

我已經知道如何在jQuery中做到這一點，我只是試圖擴大我目前對JavaScript的知識。

來源

2016-04-23 kirby3021

任何東西都可以在普通的JavaScript來實現。如果你已經有工作jQuery的代碼，那麼也許你可以[編輯]你的問題來顯示它？那麼也許我們可以給出一些關於如何用香草JS等價物替換你正在使用的jQuery方法的提示。 – nnnnnn

那麼弄清楚如何爲一個單元做到這一點，並將其應用於所有單元。 – epascarello

所以這是你將怎樣設置不透明度和事件使用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);

爲了獲得元素，您可以使用舊的DOM方法，如document.getElementById或新的方法document.querySelectorAll和document.querySelector，它們非常像jQuery，它們採用CSS選擇器並返回節點或節點列表。

，比方說，檢索所有與類list-item的li元素，並在它們之間迭代，你可以這樣做：

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 
}

來源

2016-04-23 01:07:11 PitaJ

感謝您的幫助！ – kirby3021

@ kirby3021記得接受一個答案 – PitaJ

感謝您的提醒，仍然是新的堆棧溢出 – kirby3021

這裏的「香草」 JS的方法來檢查和更新不透明度，與警告這隻適用於瀏覽器;它不會在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) }

來源

2016-04-23 01:17:40 mLuby

感謝您的幫助！ – kirby3021

我得到了它與這些代碼行工作。

與香草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>

jQuery可做到

來源

2016-04-23 01:26:23 ArchNoob

感謝您的幫助！ – kirby3021

使用JavaScript存儲，更改和更新不透明度

回答

相關問題