使用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存储，更改和更新不透明度

回答

相关问题