Speichern, ändern und aktualisieren Opazität mit JavaScript

Ich bin neu hier und neu in der Programmierung, also Entschuldigung im Voraus, wenn diese Frage sehr einfach ist und die Antwort bereits hier ist. Ich habe viel gesucht, aber ich konnte nicht die Informationen finden, die ich brauche.Speichern, ändern und aktualisieren Opazität mit JavaScript

Welchen JavaScript-Code könnte ich verwenden, um den aktuellen Deckkraftwert eines div zu holen, diesen Wert zu aktualisieren und den aktualisierten Wert erneut auf dasselbe div anzuwenden? Im Wesentlichen mache ich eine Übung, bei der die Opazität einzelner divs in einem großen Raster auf dem mouseover -Ereignis schrittweise erhöht wird. Jedes einzelne div im Grid sollte eine Erhöhung der Opazität um 0,1 pro Mal haben, wenn die Maus dieses div eingibt, bis zu einer Opazität von 1.

Ich weiß bereits, wie man das in jQuery macht, ich bin einfach versuche, meine Kenntnisse über JavaScript im Moment zu erweitern.

Quelle

2016-04-23 kirby3021

Alles, was jQuery tun kann, kann in einfachen Javascript erfolgen. Wenn Sie bereits über jQuery-Code verfügen, könnten Sie Ihre Frage vielleicht bearbeiten, um sie anzuzeigen? Dann könnten wir vielleicht ein paar Tipps geben, wie man jQuery-Methoden, die man benutzt, durch Vanilla-JS-Äquivalente ersetzt. – nnnnnn

Nun, wie Sie es für eine Zelle tun und dann auf alle Zellen anwenden. – epascarello

Das ist also, wie Sie Trübungen und Veranstaltungen mit jQuery gesetzt würde:

// `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 
});

Und hier, wie Sie mit Vanille-DOM-Methoden die oben tun würde:

// `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);

Um das Element zu erhalten Sie können alte DOM-Methoden wie document.getElementById oder die neuen Methoden document.querySelectorAll und document.querySelector verwenden, die jQuery sehr ähnlich sind, da sie einen CSS-Selektor verwenden und einen Knoten oder eine Liste von Knoten zurückgeben.

, sagen wir, Abrufen alle der li Elemente mit der Klasse list-item, und über sie iterieren, würden Sie dies tun:

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 
}

Quelle

2016-04-23 01:07:11 PitaJ

Danke für die Hilfe! – kirby3021

@ kirby3021 Denken Sie daran, eine Antwort zu akzeptieren – PitaJ

Danke für die Erinnerung, noch neu zu Stack Overflow – kirby3021

Hier ist die ‚Vanille‘ JS Art und Weise Opazität zu überprüfen und zu aktualisieren, mit der Vorbehalt, dass dies nur in Browsern funktioniert; Es funktioniert nicht in NodeJS, da kein Dokument im Knoten vorhanden ist. Sie können es auf dieser Seite ausprobieren, indem Sie die Dev-Tools öffnen (Rechtsklick, Inspizieren, Konsole in Chrome).

var div = document.querySelector('.post-text') 
console.log(div.style.opacity) // "" 
div.style.opacity = 0.5 
console.log(div.style.opacity) // "0.5"

Also für Ihre Übung, wollen Sie die Mouseover-Funktion wie so zuweisen:

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) }

Quelle

2016-04-23 01:17:40 mLuby

Danke für die Hilfe! – kirby3021

Ich habe es mit diesen Zeilen Code zu arbeiten.

mit Vanille Js.

Ich kommentiert auch.

// 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>

Quelle

2016-04-23 01:26:23 ArchNoob

Danke für die Hilfe! – kirby3021

Speichern, ändern und aktualisieren Opazität mit JavaScript

Antwort

Verwandte Themen