在更改它之前使用變量的值 - JavaScript

Question

如何在同一行中更改它之前使用變量的值。 我想有些事情是這樣的：

document.getElementById("id").style.display = this == "none"? "initial" : "none"; 

東西的地方「這」指的是變量的值，而無需重複管它叫什麼名字/路徑或。

在此先感謝。

Answer 1

使用變量：

var el = document.getElementById("id"); 
var display = el.style.display; 

el.style.display = display == "none" ? "initial" : "none"; 

Answer 2

使你快速分配變量你可以使用一個立即調用函數表達式。隨着ES6箭頭語法，看起來像這樣：

((t,k) => t[k] = t[k] == "none"? "initial" : "none") 
 
          (document.getElementById("id").style, 'display');

A word is <span id="id">not</span> hidden

Answer 3

不確定到位的要求，但這裏是一個示例代碼段，以幫助您：

window.onload = function() { 
 

 
    setInterval(function() { // To have some effect on display 
 

 
    document.getElementById("myDiv").style.display = 
 

 
     (function() { 
 
     var display = document.getElementById("myDiv").style.display; 
 
     return display; 
 
     })() // Self invoke 
 

 
    == "none" ? "block" : "none"; // Manage 
 

 
    }, 1000); 
 

 
}

#myDiv { 
 
    display: none; 
 
    border: 1px solid red; 
 
    padding: 20px; 
 
}

<div id="myDiv" class="myDivClass" style="display: none">Hello!</div>

---

使用Arrow functions：

setInterval(function() { // To have some effect on display 
 
    var element = document.getElementById("myDiv"); 
 

 
    element.style.display = 
 

 
    (() => { 
 
     return element.style.display; 
 
    })() // Self invoke 
 

 
    == "none" ? "block" : "none"; // Manage 
 

 
}, 1000);

#myDiv { 
 
    display: none; 
 
    border: 1px solid red; 
 
    padding: 20px; 
 
}

<div id="myDiv" class="myDivClass" style="display: none">Hello!</div>