javascript - 类属性的必要性，以定位 div 层

Question

我发现很难理解为什么(而不是如何)有必要将类属性分配给 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 解释的实际机制的信息)。

Answer 1

I find it difficult to understand why (not how) it is necessary to have a class attribute assigned to a div in order to change it's position.

事实并非如此。您正在使用 position 和 left 等名称设置属性，但这些不是属性，它们是样式属性。所以改变:

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' } );