打開元素的CSS /關閉使用JavaScript

目前，我有我使用突出.png文件的特定區域HTML以下塊：打開元素的CSS /關閉使用JavaScript

<div id="container"> 
    <img src="http://www.placekitten.com/200/200" /> 
    <div id="highlight"></div> 
</div>

其相應的CSS代碼如下：

#container { 
    positioon:relative; 
} 
#highlight { 
    position:absolute; 
    width:75px; 
    height:75px; 
    top:75px; 
    left:75px; 
    background: rgba(255, 0, 0, 0.4); 
}

兩者都可以看到在以下page上一起工作。

該代碼工作正常，但我想要做的是找出一種方法來打開/關閉通過JavaScript功能來控制此功能的突出顯示。我是一個JavaScript新手，不知道如何解決這個問題。我想要的只是能夠將變量傳遞給JavaScript函數，並且基於此布爾變量激活或取消激活陰影。

任何人都可以告訴我如何做到這一點？

在此先感謝所有回覆的人。

來源

2013-05-02 syedfa

您可以不用'id'設置樣式，而是通過'class'設置樣式，並在想要打開/關閉高亮時添加/刪除類。 – Ian 2013-05-02 15:45:51

function toggleHighlight(on) 
{ 
    var el = document.getElementById('highlight'); 

    el.style['display'] = on ? 'block' : 'none'; 
}

稱爲：

toggleHighlight(true); // turn on 
toggleHighlight(false); // turn off

來源

2013-05-02 15:49:34

您可以創建一個CSS類規則：

.hide { 
    display: none; 
    visibility: hidden; 
}

使用JavaScript添加或刪除類要切換的元素。這種方式，當一個元素有class="none"它不會被顯示，只是通過刪除class="none"它會再次顯示。

這裏有關於用純JavaScript添加和刪除類的一個很好的問題：Change an element's class with JavaScript

來源

2013-05-02 15:45:40 TheBronx

如果我明白你說什麼，你想，當有人通過DIV，顯示與指針超出或隱藏。
如果我沒有錯，你只需要使用#highlight:hover {...}，不需要javascript。
此外，您必須添加display: block屬性，默認情況下它必須是display: none。

來源

2013-05-02 15:46:17 DaGLiMiOuX

在你的小提琴，我可以看到你使用jquery，所以這可以使用此代碼來實現：

// show the element 
$('#highlight').hide(); 
// hide the element 
$('#highlight').show();

我已經updated您的例子測試隱藏功能。

來源

2013-05-02 15:54:30

打開元素的CSS /關閉使用JavaScript

回答

相關問題