2018/9/3 css&イベントパート2 javascript

全開の続き。CSSStyleSheetを使っていろいろやる。

<!doctype html>
<!doctype html>
<html>
<head>
<title>test</title>
<style type=”text/css” id=”divsheet”>

div {
background-color: black;
}
p {
background-color: skyblue;
}
</style>
<style type=”text/css” id=”bodysheet”>
body {
background-color: red;
}
</style>
</head>
<body>

<p>testtest</p>
<br>
<br>
<p id=”midp”>真ん中のp</p>

<p id=”middle”></p>
<br>
<p id=”undp”>下のp</p>

<p id=”under”></p>

<script type=”text/javascript”>

var midp = document.getElementById(‘midp’);
function offstylebody(){
var sheet = document.styleSheets.item(1);
sheet.disabled=true;
}
midp.addEventListener(‘mouseover’,offstylebody,false);

function onstylebody(){
var sheet = document.styleSheets.item(1);
sheet.disabled=false;
}
midp.addEventListener(‘mouseout’,onstylebody,false);

var undp = document.getElementById(‘undp’);
function offstylediv(){
var sheet = document.styleSheets.item(0);
sheet.disabled=true;
}
undp.addEventListener(‘mouseover’,offstylediv,false);
function onstylediv(){
var sheet = document.styleSheets.item(0);
sheet.disabled=false;
}
undp.addEventListener(‘mouseout’,onstylediv,false);

</script>
</body>
</html>

CSSStyleSheetオブジェクトのdisabledプロパティを操作して、

真ん中のpにマウスオーバーするとbodyの背景色が消える、マウスアウトすると元に戻る(背景色がつく)

下のpにマウスオーバーするとpの背景色が消える、マウスアウトすると元に戻る(背景色がつく)


CSSスタイルを取得・操作する方法まとめ。

●document.styleSheets[0].cssRules[0].cssText

で文字列を取得。(書き換え(変更)はできない。読み取るだけ)

●document.styleSheets[0].cssRules[0].style.getPropertyValue(“background-color”)

で各スタイルの値を取得できる。(background-colorなら”blue”、heightなら”80px”など)

●document.styleSheets[0].cssRules[0].style.backgroundColor=”blue”;

のようにCSSStyleRuleオブジェクトのstyleプロパティに新しい値を代入することでスタイルを変更する。

これにより、style要素でCSSを指定していてもjavascriptでそれを変更することが可能。

●やることは↑と同じだが、代入する代わりにsetPropertyメソッドを使用してstyleオブジェクトのプロパティをセットする。↑の例だと

document.styleSheets[0].cssRules[0].style.setProperty(“background-color”,”blue”);

●document.styleSheets[0].cssRules[0].style.removeProperty(“background-color”);

で、CSSでスタイル指定しているのを取り消す。↑の方でdisabledプロパティでstyle要素丸ごと無効にしたが、removePropertyメソッドを使えばCSSRuleごとに取り消すことができる、と。

コメントを残す

メールアドレスが公開されることはありません。