Javascript 为了定位div层，类属性的必要性

我发现很难理解为什么（而不是如何）必须为div分配class属性才能更改其位置。例如，以下代码不会将div移动到200200：

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解释的实际机制的信息）。

试试这个：

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

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

它不使用类，而是为元素内联设置样式。您所做的是设置属性，而不是样式。很多属性根本不存在，所以浏览器会忽略它们

您的代码在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" />

试试这个：

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

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

它不使用类，而是为元素内联设置样式。您所做的是设置属性，而不是样式。很多属性根本不存在，所以浏览器会忽略它们

您的代码在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" />

我发现很难理解为什么（而不是如何）必须为div分配class属性才能更改其位置

事实并非如此。您正在使用名称设置属性，如

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

到

---

旁注：

因为您使用的是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' } ); 

this.m_textLayer=$（“”）
.attr（'id'，'textLayer'）
.css({
位置：'绝对'，
左：“0px”，
顶部：“0px”，
宽度：“300px”，
高度：“100px”
})
.append（$（'p'））
.text（‘测试’）
.appendTo（此.m_基层）[0]；
//一段时间以后
$（'textLayer'）.css（{左：'200px'，上：'200px'}）；

我发现很难理解为什么（而不是如何）必须为div分配class属性才能更改其位置

事实并非如此。您正在使用名称设置属性，如

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

到

---

旁注：

因为您使用的是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' } ); 

this.m_textLayer=$（“”）
.attr（'id'，'textLayer'）
.css({
位置：'绝对'，
左：“0px”，
顶部：“0px”，
宽度：“300px”，
高度：“100px”
})
.append（$（'p'））
.text（‘测试’）
.appendTo（此.m_基层）[0]；
//一段时间以后
$（'textLayer'）.css（{左：'200px'，上：'200px'}）；

您似乎在混合使用javascript和jQuery来完成相同的工作，但不完全确定原因是什么

但这并不是问题的根源，您正在尝试设置属性而不是样式元素

您当前正在构建类似于：

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

---

请参阅：

您似乎在混合使用javascript和jQuery来完成相同的工作，但不完全确定原因是什么

但这并不是问题的根源，您正在尝试设置属性而不是样式元素

您当前正在构建类似于：

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

---

看：

哦，天哪，我觉得这里有点傻。我的感觉是css设置了属性，但事实并非如此。这肯定会把事情弄清楚的o@JochemVanDerSpek：很高兴这有帮助！单一样式更改：

$（'#div'）.css（'left'，'10px'）和多个样式更改<代码>$（'#div'）.css（{'left'：'10px'，'width'：'300px'}）推荐这本Jquery书-哦，天哪，我觉得这里有点愚蠢。我的感觉是css设置了属性，但事实并非如此。这肯定会把事情弄清楚的o@JochemVanDerSpek：很高兴这有帮助！单一样式更改：
$（'#div'）.css（'left'，'10px'）和多个样式更改<代码>$（'#div'）.css（{'left'：'10px'，'width'：'300px'}）推荐这本Jquery书籍-