hpapi.blogspot.jp: CSS

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

2021年3月6日土曜日

Google-code-prettify

ここにコードを書く

</pre>

例

function T_Searchfom(arrayVal) {
    // arrayVal 指定した値が含まれるまで探し
    // clearInterval(W_T_Searchfom);
    const TAG = 'T_Searchfom->';
    let tempArr = arrayVal.concat();
    if (typeof (W_T_Searchfom) == 'number') {
        clearInterval(W_T_Searchfom);
    }
    W_T_Searchfom = setInterval(function () {
        let cont = 0;
        but[0].click();
        var temp = gnum();
        tempArr.forEach(function (e) {
            if (temp.indexOf(e) >= 0) {
                cont++;
            }
        })
        console.info(TAG, ' clearInterval(W_T_Searchfom)  ' + arrayVal.toString());
        if (cont == arrayVal.length) {
            clearInterval(W_T_Searchfom);
            console.info(TAG, temp);
            console.info(TAG, ' T_cpt2([' + temp + ',57,0])  ');
        }
    }, 200)
}

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();

例

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;