ラベル DOM の投稿を表示しています。 すべての投稿を表示
ラベル DOM の投稿を表示しています。 すべての投稿を表示

2015年12月15日火曜日

ページ上にあるイメージを回転する Javascript CSS

ページ上にあるイメージを回転する Javascript CSS。


var j = 0;
var x= document.getElementsByTagName('img')[12];
var x= document.getElementsByTagName('img')[0];

setInterval(deg,30);
function deg(){
       console.log(j);
       x.style.transform = "rotate(" + j + "deg)";
       x.style.transform = "rotate(" + Math.random()*10 + "deg)"
       j++;
}


一定方向に回転します。
x.style.transform = "rotate(" + j + "deg)"; 


不定に回転します。
x.style.transform = "rotate(" + Math.random()*10 + "deg)"



/////////////////////////////////////////

マウスは画像上に移動(mousemove)の時、画像が回転します。
var j = document.getElementsByTagName('img');
for (var i=0; i < j.length; i++){
      j[i].addEventListener("mousemove",function(){this.style.transform = "rotate(" + Math.random()*10 + "deg)",30},false);
}

//////////////////////////////////////////
すべてのimgを回転する。
setInterval(xxx,300);
var i =0;
function xxx(){
        var x = document.getElementsByTagName('img');
        for(var j=0; j< x.length; j++){
                 x[j].style.transform = "rotate(" + i + "deg)";
                 x[j].style.transform = "rotate(" + Math.random()*10 + "deg)";
       }
    i++;
}


///////////////////////////////////////////
すべてのいメールは左右を回転します。360°折り返し

setInterval(xxx,25);
var i =0;
var chk = 0;
function xxx(){
        var x = document.getElementsByTagName('img');
        for(var j=0; j< x.length; j++){
                x[j].style.transform = "rotate(" + i + "deg)";
                //x[j].style.transform = "rotate(" + Math.random()*1 + "deg)";
        }

       if(chk == 0){
                i++;
                if(i == 360){
                        chk = 1;
               }
        }

       if(chk == 1){
                i--;
                if(i == 0){
                       chk = 0;
               }

          }
}
///////////////////////////////////////




例:

2015年12月6日日曜日

DOM 操作

var x = document.getElementById('topMain');

//親要素
element.parentNode;
element.parentElement;

//子要素
element.firstElementChild; //最初の子要素
x.firstChild;
element.lastElementChild;  //最後の子要素
x.lastChild;
element.children; //子要素リスト
x.childNodes;
x.childElementCount;


//1つ前の要素
element.previousElementSibling;
x.previousSibling;

//1つ後の要素
element.nextElementSibling;
x.nextSibling



//要素の作成
var div = document.createElement('div');
div.textContent = 'hoge';
 x.innerText = 'hoge';


//最後の子要素として追加
element.appendChild(div);


//最初の子要素として追加
element.insertBefore(div, element.firstChild);


//要素の直前に追加
element.parentNode.insertBefore(div, element);

//要素の直後に追加
element.parentNode.insertBefore(div, element.nextSibling);
要素の削除

//特定の子要素削除
element.removeChild(child);

//自分を削除
element.parentNode.removeChild(element);

//子要素を全て削除
while (element.firstChild) element.removeChild(element.firstChild);

//子要素を全て削除(part2)
element.textContent = null;
属性の操作

//属性の取得
element.getAttribute('href');

//属性を設定
element.setAttribute('href', 'http://localhost:3000');

//属性を削除
element.removeAttribute('href');
スタイル関連操作

//class追加
element.classList.add('active');

//class削除
element.classList.remove('active');

//classをトグル
element.classList.toggle('active');

//スタイルを直接指定
element.style.backgroundColor = '#ff0000';

2015年4月10日金曜日

配列により、ページ上にあるDOMの操作

配列により、ページ上にあるDOMの操作

分かった事:
DOMの配列を削除後に、要素が変わります、次回の操作に影響が出ます。
削除しなくでも良い場合、無効にする。


練習1 (成功) 削除後に配列の順番が変わります。
while (document.getElementsByTagName('img')[0]){
    imgelement = document.getElementsByTagName('img')[0];
    imgelement.parentNode.removeChild(imgelement);
}


練習2 (失敗) 操作出来ないElementが発生します。
var imgelement = document.getElementsByTagName('img');
for ( var i = 1; i < imgelement.length ; i++){
    imgelement[i].parentNode.removeChild(imgelement[i]);
}


練習3 (成功) 配列の要素が変わっていないので順番に操作出来ます。
var imgelement = document.getElementsByTagName('img');
for ( var i = 1; i < imgelement.length ; i++){
    document.getElementsByTagName('img')[i].style.display="none";
}