2013-04-05 53 views
0

我已经尝试将.style,.style.width.style.width.value添加到JavaScript的所有部分,但到目前为止无济于事。Document.getElementById问题(访问宽度属性)

本质上,我想两件事情。

  1. 要获得50px价值的警告与“动画”按钮,点击,运行该anim8功能。换句话说,我想要divwidth

  2. 在第二组代码(anim82)中,我希望能够通过单击按钮来设置/更改width。点击按钮时,我想添加10px。首先,我需要访问该变量,但我可以改变任何内容,即width

HTML

<div id="mainTxt">Dag!</div> 
<form NAME="myForm" ACTION="" METHOD="GET"> 
<input type="button" name="button" value="Animate" onClick="anim8(this.form)"> 
<input type="button" name="button" value="Animate2" onClick="anim82(this.form)"> 

CSS

#mainTxt{width:60px;} 

的Javascript

var divAlert; 
var divSize; 

function anim8(form) 
{ 
    divAlert=document.getElementById("mainTxt"); 
    alert(divAlert); 
} 

function anim82(form) 
{ 
    divSize=document.getElementById("mainTxt"); 
    divSize.style.width=parseInt(divSize.style.width)+10+'px'; 
} 
+0

[也许它可以帮助你。(https://developer.mozilla.org/en/docs/DOM/window.getComputedStyle) – fernandosavio 2013-04-05 20:44:39

+0

你有没有尝试'divSize.outerWidth' – adeneo 2013-04-05 20:48:08

回答

0

试试这个

function anim82(form) 
{ 
    divSize=document.getElementById("mainTxt"); 
    var width=divSize.offsetWidth + 100; 
    divSize.setAttribute("style","width:"+ width +"px")  
} 

JS Fiddle Example

+0

这创造了我想要的确切功能。 我想尽管为了能够访问某些/任何CSS属性,我仍然想知道我可能会做什么。假设我想改变颜色,或者离开,而不是宽度。是否有更多的通用访问者或导航我可能想看? – Xagrand 2013-04-05 20:52:56

+0

如果你想设置其他样式属性,那么你可以像'setAttribute'一样使用上面提到的方法,或者你可以简单地使用'divSize.style.color =“white”;'参见示例http://jsfiddle.net/ PnvJt/1/ – Sachin 2013-04-05 21:04:04

+0

Got it!谢啦!你是最好的! – Xagrand 2013-04-05 21:30:30

0

你的第一步应该是看看你是否有错误。如果您收到一个错误,试试这个代码

var div1 = document.getElementById("mainTxt"); 
var align = div1.getAttribute("width"); 

Source

+0

如果我使用div1.getAttribute的方式,那么我会得到“null”,尽管已经明确地设置了值。我试着检查左边或顶部,并得到相同的东西。 – Xagrand 2013-04-05 22:41:24