[英]Div height and width not being set in javascript
I am trying to set the width and height of a div in javascript but it is not being set. 我正在尝试在javascript中设置div的宽度和高度,但未设置。 I have tried a lot but nothing is working. 我已经尝试了很多,但没有任何效果。 Here is what i have tried, 这是我尝试过的
<div id="d1">asdasd</div>
<script>
var d = document.getElementById("d1");
d.style.width = "100px";
d.style.height = "100px";
d.style.cssText = 'border:1px solid black;'
</script>
Please check what is the problem! 请检查是什么问题!
I think d.style.cssText overwrites width and height properties 我认为d.style.cssText会覆盖width和height属性
Try this: 尝试这个:
var d = document.getElementById("d1");
d.style.width = "100px";
d.style.height = "100px";
d.style.cssText += 'border:1px solid black;'
As karaxuna mentioned, your d.style.cssText
is overwriting the width and height settings. 如karaxuna所述,您的d.style.cssText
将覆盖宽度和高度设置。 Simply changing your code to either this: 只需将代码更改为此:
var d = document.getElementById("d1");
d.style.width = "100px";
d.style.height = "100px";
d.style.border = '1px solid black';
or this: 或这个:
var d = document.getElementById("d1");
d.style.cssText = 'border:1px solid black;'
d.style.width = "100px";
d.style.height = "100px";
works perfectly. 完美地工作。
This works: 这有效:
<div id="d1" style="border:1px solid black;">asdasd</div>
<script>
var d = document.getElementById("d1");
d.style.height = "200px";
</script>
http://jsfiddle.net/dandv/emnMb/4/ http://jsfiddle.net/dandv/emnMb/4/
An alternate would be to define a new style element in CSS and simply set d.className to that css element. 另一种方法是在CSS中定义一个新的style元素,然后将d.className设置为该css元素。
I guess d.style.cssText is problem 我猜d.style.cssText是问题
Your problem is with d.style.cssText = 'border:1px solid black;'
您的问题出在d.style.cssText = 'border:1px solid black;'
. 。 it is overriding the width and height set by JS . 它覆盖了JS设置的宽度和高度。
Check this fiddle:- 检查这个小提琴:
Change sequence of your JS statements it will work ie 更改您的JS语句的顺序将起作用,即
<script>
var d = document.getElementById("d1");
d.style.cssText = 'border:1px solid black;'
d.style.width = "100px";
d.style.height = "100px";
</script>
Better put width, height properties in style attribute only. 最好仅在style属性中放置width,height属性。 ie 即
d.style.cssText = 'border:1px solid black; d.style.cssText ='border:1px纯黑色; width:100px; 宽度:100px; height:100px' 高度:100px'
or in CSS class 或在CSS类中
d.style.cssText = 'border:1px solid black;'
d.style.float="left";
d.style.width = "100px";
d.style.height = "100px";
You neeed to use float:left attribute. 您需要使用float:left属性。
I don't know what your problem is but I've used this and this worked 我不知道您的问题是什么,但我已经用过了,而且有效
function fnc1()
{
document.getElementById("d1").style.width="100px";
document.getElementById("d1").style.height="100px";
document.getElementById("d1").style.backgroundColor="red";
}
HTML: HTML:
<div id="d1">asdasd</div>
Javascript Java脚本
document.getElementById('d1').style.height = 90+'px';
working demo here ( works fine with chrome, din't check with other browsers ) 在这里工作的示例 (适用于chrome,不能与其他浏览器一起查看)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.