cssTextプロパティを使ってスタイルの切り替え
cssTextプロパティは読み取りだけでなく、書き換えもできる。これを利用してスタイルの変更を行います。
下の４個のスタイルをクリックすれば、そのスタイルを[ Sample ]にコピーします。
Sample
cssTextでコピーしたスタイル内容は･･･↓
Sample Source......................................................................>>>
<script type="text/javascript"><!--
window.onload = function(){
document.getElementById("box").onclick = function(evt){
if(!evt){ //IEの場合
var elem = event.srcElement; //ベント発生要素を取得
}else{ //IE以外
var elem = evt.target;
}
document.getElementById("target").style.cssText = elem.style.cssText;
document.getElementById("copy_style").innerHTML
= elem.style.cssText;
}
}
// --></script>
</head>
<body>
<div id="box">
<span style="background-color:lavender;border:1px solid navy;color:blue
;font:italic 14px 'ＭＳ 明朝'">スタイル1</span>
<span style="background-color:mistyrose;border:1px
dashed green;color:red
;font:italic 12px 'Arial Black'">スタイル2</span>
<span style="background-color:ivory;border:1px dotted
red;color:green
;font:12px 'ＭＳ 明朝'">スタイル3</span>
<span style="background-color:black;border:3px double
silver;color:white
;font:14px 'Arial Black'">スタイル4</span></div>
<h5 id="target" style="font:lighter 14px 'Arial Black'">Sample</h5>
<p class="kaisetu">cssTextでコピーしたスタイル内容は･･･↓</p>
<p id="copy_style" style="border:1px solid navy;color:maroon"></p>