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

2016年2月12日金曜日

イメージファイルのオリジナルサイズを確認する

イメージファイルのオリジナルサイズを確認する

.naturalHeight
.naturalWidth 

function item_cards_event(){
        var x = document.getElementsByClassName('item_cards');
        for(var i = 0; i<x.length; i++){
               x[i].addEventListener("mouseover",function(e){
                        this.style.boxShadow = "3px 3px 14px";
                    console.log(this.firstElementChild.nextElementSibling.firstElementChild.naturalWidth + 'x' + this.firstElementChild.nextElementSibling.firstElementChild.naturalHeight);
                },false);

                x[i].addEventListener("mouseout",function(e){
                         this.style.boxShadow = "1px 1px 1px";
                },false);
        }
}

item_cards_event();





function item_cards_event(){
        var x = document.getElementsByClassName('thumbnail_a');
        for(var i = 0; i<x.length; i++){
               x[i].addEventListener("mouseover",function(e){
                        this.style.boxShadow = "3px 3px 14px";
                        console.log(this.firstElementChild.alt);
                        console.log(this.firstElementChild.naturalWidth + 'x' + this.firstElementChild.naturalHeight);
                },false);
                         x[i].addEventListener("mouseout",function(e){
                         this.style.boxShadow = "1px 1px 1px";
                },false);
        }
}

item_cards_event();






2015年12月16日水曜日

textarea サイズの変更

textarea サイズの変更


textarea {
    resize: none;
    resize: both;
    resize: horizontal;
    resize: vertical;
}




Javascript

function comment_page_add_main(){
var x = document.getElementById('comment_page_add_main_area');
var comment_area = document.createElement('textarea');
//comment_area.cols="40";
comment_area.rows ="5";
comment_area.style.width="100%";
comment_area.style.resize = "vertical";
comment_area.id = "comment_page_add_main_area";
x.appendChild(comment_area);
}

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年10月8日木曜日

CSS

CSS





html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
font-weight: normal;
font-style: normal;
}

2015年10月7日水曜日

CSSレイアウトを確認するために Javascript

ホームページのスタイルシート、レイアウトを確認するために Javascript です。

Chrome コンソールで利用します。CSS勉強のためです。


function s_new(){
       this.div = function(){
               eng("div");
       }

       this.ul = function (){
               eng("ul");
       }

       this.li = function (){
               eng("li");
       }

       this.user = function(e){
                eng(e);
       }

      function eng (e){
            var div = document.getElementsByTagName(e);
                 if (div.length > 0){
                      for(var a = 0 ; a < div.length; a++){
                           //div[a].style.borderStyle="solid";
                           //div[a].style.borderWidth="1px";
                           div[a].style.boxShadow ="2px 2px 6px";
                         }
                }else{
                         console.log("none");
                }
       }
}

var x = new s_new;






ElementsByClassName

     function eng (e){
            var div = document.getElementsByClassName('a');
                 if (div.length > 0){
                      for(var a = 0 ; a < div.length; a++){
                           div[a].style.borderStyle="solid";
                           div[a].style.borderWidth="1px";
                         } 
                }else{
                         console.log("none");
                }
       }

eng();







2014年3月16日日曜日

スマートフォンサイトCSSのmeta要素

スマートフォンサイトCSSのmeta要素



<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0" />
<body style="width:70%">









2013年6月10日月曜日

IE8のドキュメントモードやブラウザモード

IE8標準モードで表示してほしいなら以下のように書く
<meta http-equiv="X-UA-Compatible" content="IE=IE8" />