ボタンで背景透明化・文字縁取りのCSS切り替え

2019年9月23日

目次・索引

1. ボタンでSaraCamera対応ページに切り替える簡単な方法

ボタンでSaraCamera対応ページに切り替える簡単な方法

↓↓↓htmlのヘッダに以下↓↓↓

<style>
body{
    color: #fff;
    font-size: 16pt;
    letter-spacing: 4px;
    text-shadow: 2px 2px 2px rgba(0,0,0,.74),-2px 2px 2px rgba(0,0,0,.74),2px -2px 2px rgba(0,0,0,.74),-2px -2px 2px rgba(0,0,0,.74),2px 0 2px rgba(0,0,0,.74),0 2px 2px rgba(0,0,0,.74),-2px 0 2px rgba(0,0,0,.74),0 -2px 2px rgba(0,0,0,.74);
}
.bgblue{
background-color: #99cc00;
color: initial;
	font-size: initial;
	text-shadow: initial;
}

</style>


<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#bgBtn").click(function() {
    // cssでcontainerの背景色を切り替え
    $(".container").toggleClass("bgblue");
  });
});
//-->
</script>

<style>

body{

color: #fff;

font-size: 16pt;

letter-spacing: 4px;

text-shadow: 2px 2px 2px rgba(0,0,0,.74),-2px 2px 2px rgba(0,0,0,.74),2px -2px 2px rgba(0,0,0,.74),-2px -2px 2px rgba(0,0,0,.74),2px 0 2px rgba(0,0,0,.74),0 2px 2px rgba(0,0,0,.74),-2px 0 2px rgba(0,0,0,.74),0 -2px 2px rgba(0,0,0,.74);

}

.bgblue{

background-color: #99cc00;

color: initial;

font-size: initial;

text-shadow: initial;

}

</style>

<!--

$(function() {

$("#bgBtn").click(function() {

// cssでcontainerの背景色を切り替え

$(".container").toggleClass("bgblue");

});

//-->

</script>

↓↓↓ボタンを表示する場所に以下↓↓↓

<input type="button" id="bgBtn" value="　背景透明化　">

1	<input type="button" id="bgBtn" value="　背景透明化　">

上記を使ったサンプルページはこちらです。（SaraCamera）

==========================================
PC用デモページ↓↓↓↓

PC用-背景透明化のデモページ　https://jiin.com/trans-2

blog