1

位置を変更するためにdivにクラス属性を割り当てる必要がある理由（方法ではない）を理解するのは難しいと思います。たとえば、次のコードはdivを200,200に移動しません。

this.m_textLayer = document.createElement( 'div' ); 
this.m_textLayer.setAttribute( 'id', 'textLayer' ); 
this.m_textLayer.setAttribute( 'position', 'absolute' ); 
this.m_textLayer.setAttribute( 'left', '0px' ); 
this.m_textLayer.setAttribute( 'top', '0px' ); 
this.m_textLayer.setAttribute( 'width', '300px' ); 
this.m_textLayer.setAttribute( 'height', '100px' ); 
this.m_baseLayer.appendChild( this.m_textLayer );
$( '#textLayer' ).append( $( 'p' ) ).text( 'test' );
// some time later
$( '#textLayer' ).css( { left:'200px', top:'200px' } );

ただし、「class」属性が同じ属性を持つcssのクラス定義を指していると、期待どおりに機能します。

this.m_textLayer = document.createElement( 'div' ); 
this.m_textLayer.setAttribute( 'id', 'textLayer' ); 
this.m_textLayer.setAttribute( 'class', 'Layer' ); 
this.m_baseLayer.appendChild( this.m_textLayer );
$( '#textLayer' ).append( $( 'p' ) ).text( 'test' );
// some time later
$( '#textLayer' ).css( { left:'200px', top:'200px' } );

これで、クラスattrが設定されていないときにcssスタイルが定義されていないことに関係している可能性があるため、原因を推測できますが、誰かがそれを詳細に説明したり、リソースを教えてくれたりする可能性がありますここで実際に何が起こっているのかを正確に説明していますか？（私はプログラミングに不慣れではありませんが、css / js / jqueryに不慣れであり、js解釈の実際の仕組みに関する情報を見つけるのは難しいと感じています）。

4

3 に答える 3

4

位置を変更するためにdivにクラス属性を割り当てる必要がある理由（方法ではない）を理解するのは難しいと思います。

そうではありません。やのような名前の属性を設定していますが、それらは属性ではなく、スタイル プロパティです。だから変更：positionleft

this.m_textLayer.setAttribute( 'position', 'absolute' ); 
this.m_textLayer.setAttribute( 'left', '0px' ); 
this.m_textLayer.setAttribute( 'top', '0px' ); 
this.m_textLayer.setAttribute( 'width', '300px' ); 
this.m_textLayer.setAttribute( 'height', '100px' );

に

this.m_textLayer.style.position = 'absolute' ; 
this.m_textLayer.style.left = '0px'; 
this.m_textLayer.style.top = '0px'; 
this.m_textLayer.style.width = '300px'; 
this.m_textLayer.style.height = '100px';

サイドノート：

jQuery を使用しているので、次のようにすることもできます。

this.m_textLayer = $( '<div>' )
                   .attr( 'id', 'textLayer' )
                   .css({
                       position: 'absolute',
                       left:     '0px',
                       top:      '0px',
                       width:    '300px',
                       height:   '100px'
                   })
                   .append( $( 'p' ) )
                   .text( 'test' )
                   .appendTo(this.m_baseLayer)[0];

// some time later
$( '#textLayer' ).css( { left:'200px', top:'200px' } );
于 2012-12-28T11:17:16.593 に答える
1

これを試して：

this.m_textLayer.style.position = 'absolute'; 
this.m_textLayer.style.left = '0px'; 
this.m_textLayer.style.top = '0px'; 
this.m_textLayer.style.width = '300px'; 
this.m_textLayer.style.height = '100px';

クラスは使用しませんが、要素のスタイルをインラインで設定します。あなたがしているのは、スタイルではなく属性を設定することです。これらの属性の多くはまったく存在しないため、ブラウザーはそれらを無視します。

DOM に関するコードの製品は次のようになります。

<!-- Assuming m_textLayer is a DIV -->
<div position="absolute" left="0px" top="0px" width="300px" height="300px" />

スタイルを設定すると、次のようになります。

<!-- Assuming m_textLayer is a DIV -->
<div style="position: absolute; left: 0px; top: 0px; width: 300px; height: 300px" />
于 2012-12-28T11:16:03.993 に答える
1

同じ仕事をするためにjavascriptとjQueryの両方を混ぜているようですが、その理由は100％わかりませんか?

しかし、これは問題の原因ではありません。スタイル要素の代わりに属性を設定しようとしています。

現在、次のようなものを構築しています。

<span id="textLayer" position="absolute" left="0px" top="0px" width="300px" height="100px" />

これを試して：

var m_baseLayer = document.getElementById('baselayer');
this.m_textLayer = document.createElement( 'div' ); 
this.m_textLayer.setAttribute( 'id', 'textLayer' ); 
this.m_textLayer.style.position = 'absolute' ; 
this.m_textLayer.style.left = '0px'; 
this.m_textLayer.style.top = '0px'; 
this.m_textLayer.style.width = '300px'; 
this.m_textLayer.style.height = '50px'; 
this.m_textLayer.style.background = 'green'; 
m_baseLayer.appendChild( this.m_textLayer );​

参照: http://jsfiddle.net/GPkMk/

于 2012-12-28T11:21:21.980 に答える