在香草中切換風格

是否有任何原生JavaScript函數允許在元素上切換樣式（不是類）？在香草中切換風格

到目前爲止，我使用這種腳本：

target.addEventListener('click', (e) => { 
    target.classList.toggle('target--is-visible') 
}

由風格繼：

target { 
    visibility: hidden; 

    &--is-visible { 
     visibility: visible; 
    } 
}

而且我喜歡被允許這樣做：

target.addEventListener('click', (e) => { 
    target.style.toggle.visibility = 'visible' 
}

編輯

Ternary Operator是最接近的就是我正在尋找的可讀性的任期。

而受@GuyWhoKnowsStuff發送的功能使用三元運算符，值得分享：

const div = document.querySelector('div'); 

function toggleStyle(el, prop, style1, style2) { 
    el.style[prop] = el.style[prop] === style1 ? style2 : style1; 
} 

div.addEventListener('click', e => { 
    toggleStyle(div, 'background', 'red', 'blue'); 
});

謝謝您的回答！

來源

2017-10-11 Alexis Wollseifen

你可以嘗試類似'target.style.visibility = target.style.visibility ==''visible'？ 'hidden'：'visible''然而，切換一個css類是更簡潔的方法 – Satpal

@Satpal - 切換不是一個樣式屬性 –

感謝你的評論@Satpal！這是我尋找的簡單方法。爲什麼它不是一個更清潔的方法？在可讀性或性能方面？ –

試試這個：

const div = document.querySelector('div'); 
 

 
function toggleStyle(el, prop, style1, style2) { 
 
    el.style[prop] = el.style[prop] === style1 ? style2 : style1; 
 
} 
 

 
div.addEventListener('click', e => { 
 
    toggleStyle(div, 'background', 'red', 'blue'); 
 
});

div { 
 
    padding: 40px; 
 
    background: red; 
 
}

<div>Click Me</div>

或你的情況，我不相信單擊事件觸發如果div知名度被隱藏，

看到CSS: Is a hidden object clickable?，

這樣反而切換不透明像這樣：

const div = document.querySelector('div'); 
 

 
function toggleStyle(el, prop, style1, style2) { 
 
    el.style[prop] = el.style[prop] === style1 ? style2 : style1; 
 
} 
 

 
div.addEventListener('mousedown', e => { 
 
    toggleStyle(div, 'opacity', '0', '1'); 
 
});

div { 
 
    padding: 40px; 
 
    background: red; 
 
    opacity: 1; 
 
}

<div>Click Me</div>

來源

2017-10-11 08:18:05

其實我並沒有在尋找切換元素的可見性，但更多的是爲了切換風格的一般好方法。三元運算符是最接近的，但您的自定義函數可能非常有用！非常感謝您的回答:) –

我的自定義函數使用三元運算符，並且更靈活... –

您可以用ternary operator做切換

target.addEventListener('click', (e) => { 
    target.style.visibility = target.style.visibility == 'visible' ? 'hidden' : 'visible' 
}

來源

2017-10-11 08:15:19 prasanth

感謝@prasanth，我現在正在閱讀這個:) –

您還可以添加一個原型是這樣的：

HTMLElement.prototype.toggleVisibility = function() 
{ 
    this.style.visibility = this.style.visibility == 'visible' ? 'hidden' : 'visible' 
}

，然後使用如下：

target.toggleVisibility();

它會使它在每次調用時都可見和隱藏。

來源

2017-10-11 08:25:36

在香草中切換風格

回答

相關問題