如何更改CSS屬性或一類

兩個div■找同一類中刪除標識，但我想使低div被隱藏，點擊第一div的按鈕後，第二div變得可見如何更改CSS屬性或一類

技術：

上單擊添加CSS屬性
或刪除隱藏屬性
或者如果可能的話

function myfunction() { 
 
    document.getElementById('bb').style.cssText = 'visibility:visible'; 
 
    }

.ab { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: black; 
 
} 
 

 
#bb { 
 
    visibility: hidden; 
 
}

<script src="test.js"></script> 
 
<div class="ab"> 
 
    <input type="Email" placeholder="Email" /><br/> 
 
    <input type="password" placeholder="password" /><br/> 
 
    <button type="submit" value="submit" id="btn">Submit</button></div> 
 
<div class="ab" id="bb" onclick="myfunction()"> 
 
    <p> 
 
    <font color="white">you have succesfully registered</font> 
 
    </p> 
 
    <button type="submit">Return</button> 
 
</div>

來源

2017-07-27 rajat kumar

-1

重寫實際使用jquery（我看到了標籤，但沒有看到任何）

$(document).ready(function() 
{ 
    $('.firstDiv').on('click', function() 
    { 
     $('.secondDiv').css('attribute', 'value'); 
     $('.secondDiv').removeAttr('id'); //removes all ids 
     $('.secondDiv').attr('id', 'ids I wanna Keep'); //replaces current ids with new id string 
    }) 
})

這樣做：

在第一個div點擊，將css屬性更改爲值，完全刪除id或用新字符串替換。

注意：此代碼與您的代碼不同，這是如何使用函數的示例模板。

來源

2017-07-27 10:47:13 ThisGuyHasTwoThumbs

對於downvoter：我可以 - 但留下評論，這樣我可以改善:)沒有人通過盲目downvoting學習:) – ThisGuyHasTwoThumbs

如果要在按鈕上單擊顯示第二個div。使用下面的代碼。

我已將您的myfunction()移至首次提交按鈕的點擊事件。

function myfunction(){ 
 
    document.getElementById('bb').style.cssText ='visibility:visible'; 
 
}

.ab{ 
 
    width:200px; 
 
    height:200px; 
 
    background:black; 
 
} 
 
#bb{ 
 
    visibility:hidden; 
 
}

<div class="ab"> 
 
    <input type="Email" placeholder="Email"/><br/> 
 
    <input type="password" placeholder="password"/><br/> 
 
    <button type="submit" value="submit" id="btn" onclick="myfunction()">Submit</button> 
 
</div> 
 
<div class="ab" id="bb" > 
 
    <p> 
 
    <font color="white">you have succesfully registered</font> 
 
    </p> 
 
<button type="submit" >Return</button></div>

來源

2017-07-27 10:48:13

通過增加一個點擊事件

<html> 
 

 
<body> 
 
    <script src="test.js"></script> 
 
    <div class="ab"> 
 
     <input type="Email" placeholder="Email" /> 
 
     <br/> 
 
     <input type="password" placeholder="password" /> 
 
     <br/> 
 
     <button type="submit" value="submit" id="btn" onclick="showLowerDiv()">Submit</button> 
 
    </div> 
 
    <div class="ab" id="bb" onclick="myfunction()"> 
 
     <p><font color="white">you have succesfully registered</font></p> 
 
     <button type="submit">Return</button> 
 
    </div> 
 
    <style> 
 
     .ab { 
 
      width: 200px; 
 
      height: 200px; 
 
      background: black; 
 
     } 
 
     
 
     #bb { 
 
      visibility: hidden; 
 
     } 
 
    </style> 
 
    <script> 
 
     function myfunction() { 
 
      document.getElementById('bb').style.cssText = 'visibility:visible'; 
 
     } 
 
     
 
     function showLowerDiv() { 
 
      document.getElementById('bb').style.visibility = 'visible'; 
 
     } 
 
    </script> 
 
</body> 
 

 
</html>

來源

2017-07-27 10:49:39 Nitheesh

你onclick="myfunction()"應該是第一個按鈕試試這個，不應該嗎？還有一些小錯誤/代碼中的錯別字，而我，在我的片段

function myfunction() { 
 
    document.getElementById('bb').style.cssText = 'visibility:visible'; 
 
    };

.ab { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: black; 
 
} 
 

 
#bb { 
 
    visibility: hidden; 
 
}

<div class="ab" > 
 
    <input type="Email" placeholder="Email" /><br/> 
 
    <input type="password" placeholder="password" /><br/> 
 
    <button type="submit" value="submit" id="btn" onclick="myfunction()">Submit</button></div> 
 
<div class="ab" id="bb" > 
 
    <p> 
 
    <font color="white">you have succesfully registered</font> 
 
    </p> 
 
    <button type="submit">Return</button> 
 
</div>

來源

2017-07-27 10:50:20 Johannes

jQuery中，你可以這樣做：

$(function(){ 
 
    $('#btn').on('click',function(){ 
 
    $('#bb').show(); 
 
    }); 
 
});

.ab{ 
 
    width:200px; 
 
    height:200px; 
 
    background:black; 
 
} 
 
#bb{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div> 
 
     <input type="Email" placeholder="Email"/><br/> 
 
     <input type="password" placeholder="password"/><br/> 
 
     <button type="submit" value="submit" id="btn">Submit</button></div> 
 
    <div class="ab" id="bb"> 
 
    <p><font color="white">you have succesfully registered</font></p> 
 
    <button type="submit" >Return</button> 
 
</div>

來源

2017-07-27 10:52:26 lalithkumar

如果我理解正確，您希望在喲後顯示第二個div（'bb'） ü單擊提交按鈕，然後單擊第二個div中的返回按鈕將隱藏它並返回到第一個。

在這種情況下，HTML：

<div class="ab" id="ab"> 
    <input type="Email" placeholder="Email"/><br/> 
    <input type="password" placeholder="password"/><br/> 
    <button type="button" value="submit" id="btn" onclick="submitForm();">Submit</button> 
</div> 

<div class="ab" id="bb"> 
    <p><font color="white">you have succesfully registered</font></p> 
    <button type="button" onclick="returnToForm();">Return</button> 
</div>

的CSS將是：

<style> 
    .ab { 
     width:200px; 
     height:200px; 
     background:black; 
    } 
    #bb{ 
     display: none; 
    } 
<style>

注：您需要打開腳本標籤之前關閉<style>標籤。

最後的JS：

<script> 
    function submitForm() 
    { 
     $('#ab').hide(); 
     $('#bb').show(); 
    } 
    function returnToForm() 
    { 
     $('#ab').show(); 
     $('#bb').hide(); 
    } 
</script>

來源

2017-07-27 10:54:07

爲了使第二div出現在單擊提交按鈕時，移動onclick="myfunction()"到Submit按鈕。

function myfunction() { 
 
    console.log('show') 
 
    document.getElementById('bb').style.visibility = 'visible'; 
 
    }

.ab { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: black; 
 
} 
 

 
#bb { 
 
    visibility: hidden; 
 
}

<script src="test.js"></script> 
 
<div class="ab"> 
 
    <input type="Email" placeholder="Email" /><br/> 
 
    <input type="password" placeholder="password" /><br/> 
 
    <button type="submit" value="submit" id="btn" onclick="myfunction()">Submit</button></div> 
 
<div class="ab" id="bb"> 
 
    <p> 
 
    <font color="white">you have succesfully registered</font> 
 
    </p> 
 
    <button type="submit">Return</button> 
 
</div>

來源

2017-07-27 10:54:10

看看這是什麼ü需要..

function myfunction() { 
 
    document.getElementById("bb").style.display = "block"; 
 
    }

.ab { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: black; 
 
} 
 

 
#bb { 
 
    display:none; 
 
}

<script src="test.js"></script> 
 
<div class="ab"> 
 
    <input type="Email" placeholder="Email" /><br/> 
 
    <input type="password" placeholder="password" /><br/> 
 
    <button type="submit" value="submit" id="btn" onclick="myfunction()">Submit</button></div> 
 
<div class="ab" id="bb" > 
 
    <p> 
 
    <font color="white">you have succesfully registered</font> 
 
    </p> 
 
    <button type="submit">Return</button> 
 
</div>

來源

2017-07-27 10:57:40 Eggineer

試試這個代碼...

<html> 
<body> 
<script src="test.js"></script> 
<div class="ab"> 
<input type="Email" placeholder="Email"/><br/> 
<input type="password" placeholder="password"/><br/> 
<button type="submit" value="submit" id="btn" onclick="myFunction()">Submit</button></div> 
<div class="ab" id="bb" > 
<p><font color="white">you have succesfully registered</font></p> 
<button type="submit" >Return</button></div> 
<style> 
.ab{ 
height:200px; 
background:black; 
} 
#bb{ 
visibility:hidden; 
} 
</style> 
<script> 
function myFunction() { 
    document.getElementById('bb').style.cssText ='visibility:visible'; 
console.log("dfvgds"); 
}</script> 

</body> 
</html>

來源

2017-07-27 11:02:24 Moorthy

如何更改CSS屬性或一類

回答

相關問題