我想在用戶點擊「顯示所有標記」鏈接時更改樣式（下面第二行）以刪除display: none;部分。如果用戶再次單擊「顯示所有標記」鏈接，我需要將display: none;文本重新添加到「style ...」語句中。切換顯示：無JavaScript的樣式
<a href="#" title="Show Tags">Show All Tags</a>
<ul class="subforums" style="display: none; overflow-x: visible; overflow-y: visible; ">
我在這裏搜索了Google，並找到了一個適用於我的情況的例子。我發現很多使用2個DIV塊顯示/隱藏的例子。我真的需要這樣做，通過修改html樣式元素。有沒有人有一個例子（或提供一個例子的鏈接），這種類型的文本與display: none文本進行切換。
給你ul的id，
<ul id='yourUlId' class="subforums" style="display: none; overflow-x: visible; overflow-y: visible; ">
然後做
var yourUl = document.getElementById("yourUlId");
yourUl.style.display = yourUl.style.display === 'none' ? '' : 'none';
IF你使用jQuery，這將成爲：
var $yourUl = $("#yourUlId");
$yourUl.css("display", $yourUl.css("display") === 'none' ? '' : 'none');
最後，可以明確地說你想操縱使用此CSS屬性，而不是簡單地顯示或隱藏底層元素。儘管如此，我會提到，與jQuery
$("#yourUlId").toggle();
將顯示或隱藏此元素之間交替。
你可以通過直接的JavaScript和DOM來做到這一點，但我真的推薦學習JQuery。這是一個可以用來實際切換該對象的功能。
編輯：添加的實際代碼：
解決方案：
HTML片段：
<a href="#" id="showAll" title="Show Tags">Show All Tags</a>
<ul id="tags" class="subforums" style="display:none;overflow-x: visible; overflow-y: visible; ">
<li>Tag 1</li>
<li>Tag 2</li>
<li>Tag 3</li>
<li>Tag 4</li>
<li>Tag 5</li>
</ul>
Javascript代碼： https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
$(function() {
$('#showAll').click(function(){ //Adds click event listener
$('#tags').toggle('slow'); // Toggles visibility. Use the 'slow' parameter to add a nice effect.
});
});
您可以直接從這個鏈接進行測試：http://jsfiddle.net/vssJr/5/ jQuery的
附加註釋：
有人建議使用JQuery這樣的事情是錯誤的，因爲它是一個50K庫。我有強烈的反對意見。由於其提供的巨大優勢（如許多其他JavaScript框架），JQuery被廣泛使用。此外，JQuery由內容分發網絡（CDN）託管，如Google's CDN，這將確保將該庫緩存在客戶端的瀏覽器中。它對客戶的影響很小。
此外，使用JQuery，您可以使用強大的選擇器，添加事件偵聽器，並使用大部分保證爲跨瀏覽器的功能。
如果你是初學者，想要學習Javascript，請不要打折像JQuery這樣的框架。它會讓你的生活變得更容易。
給了UL ID和使用的getElementById功能：
<html>
<body>
<script>
function toggledisplay(elementID)
{
(function(style) {
style.display = style.display === 'none' ? '' : 'none';
})(document.getElementById(elementID).style);
}
</script>
<a href="#" title="Show Tags" onClick="toggledisplay('changethis');">Show All Tags</a>
<ul class="subforums" id="changethis" style="overflow-x: visible; overflow-y: visible; ">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
您可以通過使用jQuery使用的CSS屬性做到這一點很容易... 試試這個：http://api.jquery.com/css/
其他回答你的問題完美無缺，但我只是想我會另闢蹊徑。儘可能將HTML標記，CSS樣式和JavaScript代碼分開是一個好主意。考慮到這一點，最簡單的隱藏方式是使用一個類。它允許在其所屬的CSS中定義「隱藏」。使用這種方法，您稍後可以決定通過使用CSS transition向上滾動或逐漸消失來隱藏ul，而不用更改HTML或代碼。這個時間更長，但我覺得這是一個更好的整體解決方案。
演示：http://jsfiddle.net/ThinkingStiff/RkQCF/
HTML：
<a id="showTags" href="#" title="Show Tags">Show All Tags</a>
<ul id="subforms" class="subforums hide"><li>one</li><li>two</li><li>three</li></ul>
CSS：
#subforms {
overflow-x: visible;
overflow-y: visible;
}
.hide {
display: none;
}
腳本：
document.getElementById('showTags').addEventListener('click', function() {
document.getElementById('subforms').toggleClass('hide');
}, false);
Element.prototype.toggleClass = function (className) {
if(this.className.split(' ').indexOf(className) == -1) {
this.className = (this.className + ' ' + className).trim();
} else {
this.className = this.className.replace(new RegExp('(\\s|^)' + className + '(\\s|$)'), ' ').trim();
};
};
那麼'document.getElementById（'＃potato'）。classList.toggle（'hide'）'而不是創建一個原型呢？ – JeromeJ
@JeromeJ'.toggle（）'不是一個Javascript函數（有一個jQuery'.toggle（）'）。此外，'.getElementById（）'不會使用散列符號（也是jQuery）。 – ThinkingStiff
有關哈希！儘管'.toggle（）'* DOES *存在於JavaScript中（我在我的網站上使用它），但它具有與'jQuery的'toggleClass'相同的效果，所以它不會與jQuery的'.toggle ）'。 jQuery替代js：http://toddmotto.com/is-it-time-to-drop-jquery-essentials-to-learning-javascript-from-a-jquery-background/ – JeromeJ
你使用jQuery？ – jQuerybeast