Question

我是新来的，也是编程的新手，如果这个问题非常基础并且答案已经在这里，请提前道歉。我做了很多搜索，但我一直无法找到我需要的信息。

我可以使用哪些JavaScript代码来提取div的当前不透明度值，更新该值，并将更新后的值重新应用于同一个div？本质上，我正在进行一项练习，该练习涉及在mouseover事件中逐渐增加大网格中各个div的不透明度。每当鼠标进入该div时，网格中的每个div都应该增加0.1的不透明度，直到不透明度为1。

我已经知道如何在jQuery中执行此操作，我现在只是想扩展我对JavaScript的了解。

Answer 1

所以这就是你用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
});

以下是使用vanilla 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选择器并返回节点或节点列表。

比方说，检索具有类li的所有list-item元素，并迭代它们，你会这样做：

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
}

Answer 2

这是＆＃39; vanilla＆＃39; 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) }

Answer 3

我得到了这些代码行。

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

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

3 个答案: