处理DIV的动态属性 [英] Handle dynamic properties of DIVs
问题描述
我开始开发一个网站，在许多方面应该类似于一个Flash网站，但当然只有JS。真是个挑战！当然，
的重要部分应该是管理对象的位置，这样做至少我需要能够得到所有的东西。 />
来自他们的属性，如果他们有动态内容的话。我现在陷入困境的简单问题是获得一个div的宽度，即
包含一个文本，在右边放置下一个div。当我移动DIV时，我在IE和Mozilla中有很多不同的行为。实际上这个结构给了
：
< div name =" containerDiv" id =" containerDiv"
style =" background-color：#CCCCCC; position：absolute; top：10px; left：10px">
< div name =" levelZeroDiv" id =" levelZeroDiv">
这里的一些文字...
< / div>
< div name =" levelOneDiv" id =" levelOneDiv"
style =" background-color：#CC0000; position：absolute; top：0px;">< / div>
< / div>
使用此代码后的
（它与原版相比非常简化）：
document.getElementById（''levelOneDiv ''）.innerHTML = QUOT;这里的一些文字......" ;;
getStyleObject（" levelOneDiv"）。left =" 100px";
在IE上我有DIV将其彩色背景放置在右侧
位置，在Mozilla上我看到文本位于正确的位置
但没有背景。左边的属性似乎有所改变，但是如果我检查它的宽度，使用这个函数，我在
网页上找到了一个：
函数getWidth（someObject）{
var w;
if（someObject.style.width）{
w = someObject。 style.width;
}否则if（someObject.style.pixelWidth）{
w = someObject.style.pixelWidth;
}否则if（ someObject.offsetWidth）{
w = someObject.offsetWidth;
}否则if（document.defaultView&&
document.defaultView.getComputedStyle ）{
w = document.defaultView.getComputedStyle（someObject，''''）。getPropertyValue（''width''）;
}
if（typeof w ==" string"）w = parseInt（w）;
return w;
}
getWidth（document.getElementById（''levelOneDiv''））
它的宽度为0.在IE上它完美无缺。有没有人对
有什么线索呢？你知道任何资源可以帮助我解决这个非常烦人的问题吗？
感谢所有人，chr
I started developing a website that for many aspects should be similar
to a Flash website but of course only in JS. What a challenge! An
important part, of course, should be the managing of the position of
the objects and to do so I need at least to be able to get all the
properties from them, also if they have dynamic content. The very
simple issue I''m stuck at the moment is to get the width of a div that
contain a text, to place at its right the next div. I have very
different behaviors in IE and Mozilla when I move a DIV. In fact given
this structure:
<div name="containerDiv" id="containerDiv"
style="background-color:#CCCCCC;position:absolute;top:10px;left:10px ">
<div name="levelZeroDiv" id="levelZeroDiv">
some text here...
</div>
<div name="levelOneDiv" id="levelOneDiv"
style="background-color:#CC0000;position:absolute;top:0px;"></div>
</div>
after using this code (it is very simplified from the original):
document.getElementById(''levelOneDiv'').innerHTML=" some text here...";
getStyleObject("levelOneDiv").left= "100px";
on IE I have the DIV with its colored background placed to the right
position, on Mozilla I see the text positionate in the right position
but no backround. The left attribute seems the be changed but if I
check its width, using this function I refined from one I found on the
web:
function getWidth(someObject){
var w;
if (someObject.style.width){
w=someObject.style.width;
}else if(someObject.style.pixelWidth){
w=someObject.style.pixelWidth;
}else if(someObject.offsetWidth){
w=someObject.offsetWidth;
}else if(document.defaultView &&
document.defaultView.getComputedStyle) {
w=document.defaultView.getComputedStyle(someObject ,'''').getPropertyValue(''width'');
}
if(typeof w=="string") w=parseInt(w);
return w;
}
getWidth(document.getElementById(''levelOneDiv''))
It''s width is 0. On IE it works perfectly. Does anyone have any clue on
why it happens? Do you know any resource can help me with this very
annoying issues?
Thanks to all, chr
推荐答案
ch ******** @ lateral.net 写道：
左边的属性似乎有所改变但是如果我检查它的宽度，使用这个函数我从我在网页上找到的那个改进了：
函数getWidth（someObject）{
var w;
if（someObject.style.width）{
w = someObject.style.width;
}否则if（someObject.style.pixelWidth）{
w = someObject.style.pixelWidth;
} else if（someObject.offsetWidth）{
w = someObject.offsetWidth;
}否则if（document.defaultView&&
document.defaultView.getComputedStyle）{
w = document.defaultView.getComputedStyle（someObject，''''）。getPropertyValue（''width''）;
}
if（typeof w ==" string"）w = parseInt（w）;
返回nW;
}
getWidth（document.getElementById（''levelOneDiv''））
它的宽度为0.在IE上它完美无缺。有没有人知道为什么会这样？你知道任何资源可以帮助我解决这个非常烦人的问题。
The left attribute seems the be changed but if I
check its width, using this function I refined from one I found on the
web:
function getWidth(someObject){
var w;
if (someObject.style.width){
w=someObject.style.width;
}else if(someObject.style.pixelWidth){
w=someObject.style.pixelWidth;
}else if(someObject.offsetWidth){
w=someObject.offsetWidth;
}else if(document.defaultView &&
document.defaultView.getComputedStyle) {
w=document.defaultView.getComputedStyle(someObject ,'''').getPropertyValue(''width'');
}
if(typeof w=="string") w=parseInt(w);
return w;
}
getWidth(document.getElementById(''levelOneDiv''))
It''s width is 0. On IE it works perfectly. Does anyone have any clue on
why it happens? Do you know any resource can help me with this very
annoying issues.
其他人无疑会有更好的建议，但作为一个起点，
你测试了哪个getWidthif与IE相比，Mozilla触发的条件是b $ b。另外，你的getWidth函数是
也许太全面了，因为它获得了不同条件的
不同的条件。
For例如，someObject.style.width如果内联样式宽度，属性将仅返回
值。已经设置了一个元素。 I.e.
< div style =" width：100px">< / div>。可能是Mozilla正在返回
" 0"在这里，如果你没有设置相关DIV的内联样式。
offsetWidth可能是你最好的[非标准]获取方法
实际计算宽度，包括边框，所以我会尽量减少
你的获取宽度函数。
Julian
Others will no doubt have better suggestions, but as a starting point,
have you tested which of the getWidth "if" conditions is being
triggered in Mozilla compared with IE. Also, your getWidth function is
perhaps too comprehensive, in that it is getting different values for
different conditions.
For instance the "someObject.style.width" property will only return a
value if the inline style "width" has been set on an element. I.e.
<div style="width:100px"></div>. It may be that Mozilla is returning
"0" here, if you have not set the inline style of the relevant DIV.
offsetWidth is probably your best [non standard] method of getting
actual calculated width, including borders, so I would try reducing
your get width function to just that.
Julian
ch********@lateral.net 写道：
左边的属性似乎有所改变，但是如果我检查它的宽度，使用这个功能我从网页上找到的那个改进了：
function getWidth（someObject）{
var w;
if（someObject.style.width）{
w = someObject.style.width;
} else if（someObject .style.pixelWidth）{
w = someObject.style.pixelWidth;
} if if（someObject.offsetWidth）{
w = someObject.offsetWidth;
} else if（document .defaultView&&
document.defaultView.getComputedStyle）{
w =文件.defaultView.getComputedStyle（someObject，''''）。getPropertyValue（''width''）;
}
if（typeof w ==" string"）w = parseInt（w）;
返回w;
}
getWidth（document.getElementById（''levelOneDiv''））
它的宽度为0.在IE上它完美地运作。有没有人知道为什么会这样？你知道任何资源可以帮助我解决这个非常烦人的问题。
The left attribute seems the be changed but if I
check its width, using this function I refined from one I found on the
web:
function getWidth(someObject){
var w;
if (someObject.style.width){
w=someObject.style.width;
}else if(someObject.style.pixelWidth){
w=someObject.style.pixelWidth;
}else if(someObject.offsetWidth){
w=someObject.offsetWidth;
}else if(document.defaultView &&
document.defaultView.getComputedStyle) {
w=document.defaultView.getComputedStyle(someObject ,'''').getPropertyValue(''width'');
}
if(typeof w=="string") w=parseInt(w);
return w;
}
getWidth(document.getElementById(''levelOneDiv''))
It''s width is 0. On IE it works perfectly. Does anyone have any clue on
why it happens? Do you know any resource can help me with this very
annoying issues.
其他人无疑会有更好的建议，但作为一个起点，
你测试了哪个getWidthif与IE相比，Mozilla触发的条件是b $ b。另外，你的getWidth函数是
也许太全面了，因为它获得了不同条件的
不同的条件。
For例如，someObject.style.width如果内联样式宽度，属性将仅返回
值。已经设置了一个元素。 I.e.
< div style =" width：100px">< / div>。可能是Mozilla正在返回
" 0"在这里，如果你没有设置相关DIV的内联样式。
offsetWidth可能是你最好的[非标准]获取方法
实际计算宽度，包括边框，所以我会尽量减少
你的获取宽度函数。
Julian
Others will no doubt have better suggestions, but as a starting point,
have you tested which of the getWidth "if" conditions is being
triggered in Mozilla compared with IE. Also, your getWidth function is
perhaps too comprehensive, in that it is getting different values for
different conditions.
For instance the "someObject.style.width" property will only return a
value if the inline style "width" has been set on an element. I.e.
<div style="width:100px"></div>. It may be that Mozilla is returning
"0" here, if you have not set the inline style of the relevant DIV.
offsetWidth is probably your best [non standard] method of getting
actual calculated width, including borders, so I would try reducing
your get width function to just that.
Julian
您好朱利安，Firefox调用offsetWidth。但是担心的问题更多的是，如果你看一下这个简单的例子：
http://nuthinking.com/test/lateral/div_move.html
在firefox中的bg颜色div移动之后就消失了。
它的宽度崩溃:(
谢谢，chr
Hi Julian, Firefox calls the offsetWidth. But the problem that worries
me more is that if you look this simple example:
http://nuthinking.com/test/lateral/div_move.html
In firefox the bg color of the div disappears after moving it and also
its width crashes :(
Thanks, chr
这篇关于处理DIV的动态属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
