I have a script written up that when a button is pressed, the formatdialog div gets resized. The problem is that I can't figure out why my javascript code does not work. I am able to resize the width and height, but for whatever reason, the top and left can't be adjusted.
It doesn't make sense to me what could be causing a problem. Firebug doesn't give me any errors. The javascript just resizes the width and height and ignores the top and left attributes. I am guessing that the css properties are causing a problem, I just don't know what.
css:
#formatdialog {
display:none;
left:25%;
top:25%;
width:400px;
height:200px;
position:absolute;
z-index:100;
background:white;
padding:2px;
font:10pt tahoma;
border:1px solid gray
}
Javascript:
function FormatDialogResize(){
var elem = document.getElementById('FormatDialog');
elem.style.top = "10%";
elem.style.left = "10%";
elem.style.width = "600px";
elem.style.height = "500px";
}
I also tried:
function FormatDialogResize(){
var elem = document.getElementById('FormatDialog');
elem.style.top = 10+"%";
elem.style.left = 10+"%";
elem.style.width = "600px";
elem.style.height = "500px";
}
Thanks.
Why is you class name missing the pascal casing for the element ID in the classId
#formatdialog {
FormatDialog
You have a typo.
The element id is formatdialog but you are trying to call FormatDialog
var elem = document.getElementById('FormatDialog');
Your code should be like this:
<div id="formatdialog">
</div>
var elem = document.getElementById('formatdialog');
elem.style.top = "10%";
elem.style.left = "10%";
elem.style.width = "600px";
elem.style.height = "500px";
#formatdialog
{
left:25%;
top:25%;
width:400px;
height:200px;
position:absolute;
z-index:100;
padding:2px;
font:10pt tahoma;
border:1px solid gray;
background-color:orange;
}
If you want to use Pascal casing make sure it is the same in elementId and class
Check this Fiddle
我有一个类似的问题,并发现设置.top在我将元素设置为“position:absolute”之后才会起作用。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.