Home > スポンサー広告 > User JavaScriptの練習 - 要素の表示・非表示のスイッチ

スポンサーサイト

スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/75-b4c9065a
Listed below are links to weblogs that reference
スポンサーサイト from Karafuto Blog

Home > スポンサー広告 > User JavaScriptの練習 - 要素の表示・非表示のスイッチ

Home > user javascript > User JavaScriptの練習 - 要素の表示・非表示のスイッチ

User JavaScriptの練習 - 要素の表示・非表示のスイッチ

user javascript

Operaで役に立たない User JavaScriptを書いています。

要素の表示・非表示を切り替えるスイッチを作る

Operaのホームページの画像に表示・非表示のスイッチを付けた。そのスイッチをクリックすると画像の表示・非表示を切り替える。

// ==UserScript==
// @include http://www.opera.com/*
// @include http://jp.opera.com/*
// @exclude 
// ==/UserScript==

document.addEventListener('load', function() {
    // 画像を取得
    topImage = document.getElementById('contentstart').nextSibling.firstChild.firstChild;
    // スイッチの要素を作成
    var switchImage= document.createElement('div');
    switchImage.style.cssText = 'padding: 6px;' + 'margin: 6px;' + 'background-color: white;' +
        'color: black;' + 'font: 20px sans-serif;';
    var txt = document.createTextNode( '+');
    switchImage.appendChild(txt);
    topImage.parentNode.insertBefore( switchImage, topImage );
    topImage.style.display = 'none';

    // スイッチの動作
    switchImage.addEventListener('click', function() {
        if ( topImage.style.display ) {
            topImage.style.display = '';
        } else {
            topImage.style.display = 'none';
        }
        event.preventDefault();
    }, false);
}, false);

画像を取り出す。

topImage = document.getElementById('contentstart').nextSibling.firstChild.firstChild;

表示・非表示するスイッチを付けた画像を全部隠すのではなく、一部を残して隠す

非表示した画像の一部を残して、何があるのかを示す。

画像の縦の長さを短くするだけでは、比率が変わるだけで画像は消えない。

画像を囲む要素を作り、その要素の長さを変えることで、画像の見える部分の長さを変えられる。

// ==UserScript==
// @include http://www.opera.com/*
// @include http://jp.opera.com/*
// @exclude 
// ==/UserScript==

document.addEventListener('load', function() {
    // 画像を取得
    topImage = document.getElementById('contentstart').nextSibling.firstChild.firstChild;
    // スイッチの要素を作成
    var switchImage= document.createElement('div');
    switchImage.style.cssText = 'padding: 6px;' + 'margin: 6px;' + 'background-color: white;' +
        'color: black;' + 'font: 20px sans-serif;';
    var txt = document.createTextNode( '+');
    switchImage.appendChild(txt);
    topImage.parentNode.insertBefore( switchImage, topImage );

    // 画像を囲む要素を作成
    var closeImage = document.createElement('div');
    var topImageHeight = topImage.height;
    var closeHeight = '80px';
    closeImage.style.height = closeHeight;
    closeImage.style.overflow = 'hidden';
    closeImage.style.border = 'thin solid red';
    topImage.parentNode.insertBefore( closeImage, topImage );
    closeImage.appendChild( topImage );

    // スイッチの動作
    switchImage.addEventListener('mouseover', function() {
        if ( closeImage.style.height == closeHeight ) {
            closeImage.style.height = topImageHeight;
        } else {
            closeImage.style.height = closeHeight;
        }
    }, false);
}, false);
closeImage.style.overflow = 'hidden';

にしておかないと、画像がはみ出して、下の要素と重なる。

画像の表示・非表示のスイッチを付けたOperaのページ

赤い枠に囲まれたのが一部を残して非表示にした画像。画像の上にある「+」が画像の表示・非表示を切り替えるスイッチ。

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/75-b4c9065a
Listed below are links to weblogs that reference
User JavaScriptの練習 - 要素の表示・非表示のスイッチ from Karafuto Blog

Home > user javascript > User JavaScriptの練習 - 要素の表示・非表示のスイッチ

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。