ＳＱＬの窓
<< Google がホスティ… | TOP | jquery.balloon.js … >>

2020年05月23日


jQuery による link 要素の追加と削除を bootstrap.css でリアルタイムチェック

 
このサンプルは、css 用ですが、script でも同じです。bootstrap を組み込むと、たいていなんらかの変化が出るので確認に使用してます。

特定の要素の下に追加、削除を想定しているので id を持つ要素だともっと簡単ですが、ここではそのページの最後の link 要素を使用しています > 『$("link").eq($("link").length-1)』




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

<script>

$(function(){

	// Bootstrap 削除
	$("#btn-remove").on("click", function(){

		if ( $("#bootstrap").length != 0 ) {
			$("#bootstrap").remove();
		}

	});

	// Bootstrap 適用
	$("#btn-apply").on("click", function(){

		if ( $("#bootstrap").length == 0 ) {

			var link = $("<link id='bootstrap'>");
			link.prop({
				"rel": "stylesheet",
				"href": "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"
			});

			// 最後の link の後に追加
			var target = $("link").eq($("link").length-1);
			link.insertAfter(target);
		}

	});

});
</script>

<div>
	<p>
		<input type="button" id="btn-remove" value="Bootstrap 削除">
		<input type="button" id="btn-apply" value="Bootstrap 適用">
	</p>
</div>
タグ：Bootstrap jquery
【jQueryの最新記事】
posted by lightbox at 2020-05-23 12:49 | jQuery | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり