jQueryは、指定したラベルにスタイルを追加および削除する方法
2328 ワード
jQueryでは、指定したラベルにスタイルを追加および削除する方法:Webページの実際のアプリケーションでは、異なる条件に基づいて要素のCSSスタイルを変更する必要があります.要素にCSSクラスを動的に追加して削除することで、この機能を実現できます.次に、この機能を実装する方法を例で説明します.一.addClass()とremoveClass()を使用してCSSクラスを追加および削除します.コードの例は次のとおりです.
上記のコードは、指定したスタイルを削除するために追加できます.上は単なるプレゼンテーションで、必要に応じて追加または削除できます.二.toggleClass()を使用してスタイルクラスの追加と削除を切り替えます.一致するオブジェクトに指定したスタイルクラスがある場合、toggleClass()は指定したクラスを削除し、ない場合は指定したクラスを追加します.コードの実力は以下の通りです.
以上のコードは、指定したスタイルクラスの削除と追加を切り替えることができます.
原文の住所は次のとおりです.http://www.softwhy.com/forum.php?mod=viewthread&tid=5789
詳細については、次の項目を参照してください.http://www.softwhy.com/jqshili/
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title> </title>
<style type="text/css">
.mytest{
border:1px solid green;
width:100px;
height:100px;
color:red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#add").click(function () {
$("div").addClass("mytest");
});
$("#del").click(function () {
$("div").removeClass("mytest");
})
})
</script>
<body>
<div> ， </div>
<button id="add"> </button>
<button id="del"> </button>
</body>
</html>上記のコードは、指定したスタイルを削除するために追加できます.上は単なるプレゼンテーションで、必要に応じて追加または削除できます.二.toggleClass()を使用してスタイルクラスの追加と削除を切り替えます.一致するオブジェクトに指定したスタイルクラスがある場合、toggleClass()は指定したクラスを削除し、ない場合は指定したクラスを追加します.コードの実力は以下の通りです.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title> </title>
<style type="text/css">
.mytest{
border:1px solid green;
width:100px;
height:100px;
color:red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#switch").click(function () {
$("div").toggleClass("mytest");
});
})
</script>
<body>
<div class="mytest"> ， </div>
<button id="switch"> </button>
</body>
</html>以上のコードは、指定したスタイルクラスの削除と追加を切り替えることができます.
原文の住所は次のとおりです.http://www.softwhy.com/forum.php?mod=viewthread&tid=5789
詳細については、次の項目を参照してください.http://www.softwhy.com/jqshili/