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 回答