切换div的不透明度

Question

我正在尝试编写代码来切换div的不透明度，但是我遇到了麻烦。 如果单击此按钮，则希望它将#infodiv的不透明度设置为1.0，现在将其设置为0.0。

#infodiv{
    width: 250px;
    height: 0px;
    margin-top: 10%;
    opacity: 0.0;
}

这是我要调用的函数。

function toggles(){
    infodiv.css('opacity', '1.0');
}

可能是一些需要调整的功能，也许吗？ 感谢任何愿意帮助您的人。 这是一个小提琴

Answer 1

您必须使用jQuery设置元素的样式：

function toggles() {
  $('#infodiv').css('opacity', '1.0');
}

Answer 2

您需要使用ID选择器 ，该选择器将返回jQuery对象，因为方法.css()是jQuery函数

function toggles() {
  $('#infodiv').css('opacity', '1.0');
}

演示

但是我建议您创建一个CSS类，例如

.higheropacity {
    opacity: 1.0 !important
}

然后使用.toggleClass()方法

function toggles() {
  $('#infodiv').toggleClass('higheropacity');
}

演示

Answer 3

切换jQuery是否显示某些内容的最简单方法是使用.toggle()

$('#infodiv').click(function(){
   $(this).toggle();
})

如果您需要更改不透明度，请尝试toggleClass()并创建一个具有不透明度1的新CSS类。

// CSS

.opaque{
   opacity: 1;
}

// jQuery

$('#infodiv').click(function(){
   $(this).toggleClass('opaque');
})

Answer 4

如果您使用纯JavaScript，您的函数将如下所示

function toggles(){
   document.getElementById('infodiv').style.opacity = '1.0';
}

Answer 5

使用Element.classList

 var infodiv = document.querySelector("#infodiv"); function clickToggle(){ this.classList.toggle("active") } infodiv.addEventListener("click",clickToggle, false); 

 #infodiv{ width: 250px; height: 250px; background: red; opacity: 1; } #infodiv.active{opacity: 0} 

 <div id=infodiv></div> 

Answer 6

 $(function() { $('#btn').click(function() { $('#infodiv').toggleClass('active'); }); }); 

 #infodiv { width: 250px; margin-top: 10%; opacity: 0.0; } #infodiv.active { opacity: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="infodiv"> <div class="infotext">This is a test.</div> </div> <button type="button" id="btn">btn</button> 

Answer 7

好吧，除了jQuery之外，您总是可以做类似的事情

function toggles() {
   document.getElementById('infodiv').style.opacity = 1;
}

如果您想使用纯JavaScript。