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

Store, change, and update opacity using JavaScript

本文关键字：更新 不透明度 JavaScript 存储 使用      更新时间：2023-09-26

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

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

我已经知道如何在jQuery中做到这一点，我现在只是想扩展我对JavaScript的了解。

所以这就是

你用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
}

这是检查和更新不透明度的"原版"JS方法，需要注意的是，这仅适用于浏览器;它在NodeJS中不起作用，因为node中没有文档。您可以通过打开开发工具（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) }

我让它处理这些代码行。

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

相关文章：