1

この関数は機能しません..理由がわかりません...エラーはありません...しかし、画像をクリックしても縮小しません。

image_element.addEventListener( "click", function( )
{ 
    this.style.width = ( parseInt( this.style.width ) - 1 ) + 'px';
    this.style.height = ( parseInt( this.style.height ) - 1 ) + 'px';
}, false );
4

4 に答える 4

2

thisは、eventListener のコンテキストでは、[イベントを発生させた] 要素です。あなたが抱えているかもしれない問題は、this.style.widthまだ指定されていないかもしれないということです...

の値を記録/警告this.style.widthし、最初にそこにあるものを確認します。

于 2012-05-31T18:48:38.223 に答える
1 
image_element.addEventListener( "click", function( )
{ 
    var iWidth  = parseInt(this.style.width.substr(0, this.style.width.length-2), 10);
    var iHeight = parseInt(this.style.height.substr(0, this.style.height.length-2), 10);

    this.style.width  = (parseInt(iWidth  - 1, 10)) + 'px';
    this.style.height = (parseInt(iHeight - 1, 10)) + 'px';
}, false );
于 2012-05-31T18:50:56.923 に答える
1

キーワードthisは、誰がイベントをトリガーしたかを示します。この場合は、DOM Element

しかし、あなたの問題は、スタイルがundefined初期化されていないためです。したがって、初期化していない場合でも、「ComputedStyle」を使用して現在の値を取得する必要があります。

image_element.addEventListener( "click", function( )
{ 
    this.style.width = ( getStyle(this,'width',true) - 1 ) + 'px';
    this.style.height = ( getStyle(this,'height',true) - 1  ) + 'px';
}, false );

この関数をドキュメントに添付します。

/** Get the current computed style of an element */
function getStyle(element, strCssRule, returnInt){
    if(typeof element==="string"){element=document.getElementById(element);}
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(element, "").getPropertyValue(strCssRule);
    }
    else if(element.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){ return p1.toUpperCase(); });
        strValue = element.currentStyle[strCssRule];
    }
    if(returnInt===true){ strValue=parseInt(strValue); }
    return strValue;
}
于 2012-05-31T19:00:10.130 に答える
-1

jQuery を使用します。

function initOrbs()
{
    var image_element = document.createElement( 'img' );
        $(image_element).addClass("orb");
        image_element.id = icon_array[ initOrbs.index ];
        image_element.speed = icon_array[ initOrbs.index + 1 ];
        if(image_element.speed  > 10000 )
        {
            image_element.speed  = image_element.speed / 10;
            $(image_element).width(20);
            $(image_element).height(20);
        }
        image_element.src = '/develop/foo/favicons/' + icon_array[ initOrbs.index ];  
        image_element.style.top = '-80px';
        image_element.style.left = random( 100, 800) + 'px';
        sky.appendChild( image_element );
        $(image_element).click( function()
        { 
            $(this).width( parseInt( $(this).width() ) - 1 );
            $(this).height( parseInt( $(this).height() ) - 1 );
        });
        moveLinear( image_element );
        initOrbs.index += 2;
}
于 2012-05-31T19:04:25.200 に答える