javascript - javascript中未设置div的高度和宽度

Question

我正在尝试在 javascript 中设置 div 的宽度和高度，但它没有被设置。我已经尝试了很多，但没有任何效果。这是我尝试过的，

<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>

请检查是什么问题！

Answer 1

我认为d.style.cssText覆盖width和height属性

试试这个：

var d = document.getElementById("d1");
d.style.width = "100px";
d.style.height = "100px";
d.style.cssText += 'border:1px solid black;'

Answer 2

正如 karaxuna 提到的，您d.style.cssText正在覆盖宽度和高度设置。只需将您的代码更改为：

var d = document.getElementById("d1");
d.style.width = "100px";
d.style.height = "100px";
d.style.border = '1px solid black';

或这个：

var d = document.getElementById("d1");
d.style.cssText = 'border:1px solid black;'
d.style.width = "100px";
d.style.height = "100px";

完美运行。

Answer 3

您的问题与d.style.cssText = 'border:1px solid black;'. 它覆盖了 JS 设置的宽度和高度。

检查这个小提琴： -

http://jsfiddle.net/RZKnQ/1/

Answer 4

这有效：

<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/

Answer 5

另一种方法是在 CSS 中定义一个新的样式元素并简单地设置d.className为该 CSS 元素。

我猜

d.style.cssText 

是问题

Answer 6

更改您的 JS 语句的顺序它将起作用，即

<script>
    var d = document.getElementById("d1");
    d.style.cssText = 'border:1px solid black;'
    d.style.width = "100px";
    d.style.height = "100px";
</script>

最好只将宽度、高度属性放在样式属性中。IE

d.style.cssText = 'border:1px 纯黑色; 宽度：100 像素；高度：100px'

或在 CSS 类中

Answer 7

d.style.cssText = 'border:1px solid black;'
d.style.float="left";
d.style.width = "100px";
d.style.height = "100px";​

您需要使用 float:left 属性。

Answer 8

我不知道你的问题是什么，但我已经使用了这个并且它有效

    function fnc1()
{
    document.getElementById("d1").style.width="100px";
    document.getElementById("d1").style.height="100px";
    document.getElementById("d1").style.backgroundColor="red";
}

Answer 9

HTML：

<div id="d1">asdasd</div>​

Javascript

document.getElementById('d1').style.height = 90+'px';​

在这里工作演示（适用于 chrome，不检查其他浏览器）