我是新来的,也是编程的新手,如果这个问题非常基础并且答案已经在这里,请提前道歉。我做了很多搜索,但我一直无法找到我需要的信息。
我可以使用哪些JavaScript代码来提取div的当前不透明度值,更新该值,并将更新后的值重新应用于同一个div?本质上,我正在进行一项练习,该练习涉及在mouseover事件中逐渐增加大网格中各个div的不透明度。每当鼠标进入该div时,网格中的每个div都应该增加0.1的不透明度,直到不透明度为1。
我已经知道如何在jQuery中执行此操作,我现在只是想扩展我对JavaScript的了解。
答案 0 :(得分: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
});
以下是使用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
}
答案 1 :(得分:0)
这是&#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) }
答案 2 :(得分:0)
我得到了这些代码行。
与香草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>