我发现很难理解为什么(而不是如何)为了改变它的位置而必须将一个类属性分配给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解释的实际机制的信息。)
答案 0 :(得分:4)
我发现很难理解为什么(不是如何)将一个类属性分配给div以便改变它的位置。
不是。您使用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' } );
答案 1 :(得分: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" />
答案 2 :(得分: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 );