Home > スポンサー広告 > User JavaScriptの練習 - 要素を追加

スポンサーサイト

スポンサー広告

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

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/42-ff31ee4d
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のホームページに要素を追加する

Operaのホームページのbody要素の下に h1要素を追加する。ホームページの一番下に'The End'と表示される。

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

document.addEventListener('load', function() {
    var elm = document.createElement('h1');
    // 作成した要素にスタイルを指定
    elm.style.padding = '20px';
    elm.style.margin  = '0px';
    elm.style.color   = 'white';
    elm.style.backgroundColor = 'red';
    var txt = document.createTextNode('The End');
    elm.appendChild(txt);
    document.body.appendChild(elm);
}, false);
  1. createElement()で h1要素を作る。
  2. createTextNode()でテキストノードを作る。
  3. appendChild()で 1.のh1要素の子ノードに 2.のテキストノードを加える。
  4. appendChild()で document.bodyの子ノードに h1要素を加える。

Operaのホームページの要素の前に要素を挿入する

Operaのホームページのトップの前に div要素を挿入する。ホームページのトップの上に割り込んで、'Welcome to the User JavaScript!'と表示される。

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

document.addEventListener('load', function() {
    var top = document.getElementById('top');

    if (top) {
        var elm = document.createElement('div');
        elm.style.padding = '41px';
        elm.style.margin  = '0px';
        elm.style.color   = 'white';
        elm.style.backgroundColor = 'blue';
        elm.innerHTML     = '<h1>Welcome to the User JavaScript!</h1>';
        top.parentNode.insertBefore(elm, top);
    }
}, false);
  1. getElementById()で 'top'idの要素を取り出す。
  2. createElement()で div要素を作る。
  3. innerHTMLで div要素の中に h1要素を設定する。
  4. insertBefore()で 'top'idの要素の前に div要素を挿入する。

参考にしたサイト、スクリプト

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/42-ff31ee4d
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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。