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

這有效：

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

另一種方法是在CSS中定義一個新的style元素，然后將d.className設置為該css元素。

我猜d.style.cssText是問題

Answer 5

您的問題出在d.style.cssText = 'border:1px solid black;' 。 它覆蓋了JS設置的寬度和高度。

檢查這個小提琴：

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

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>

最好僅在style屬性中放置width，height屬性。 即

d.style.cssText ='border：1px純黑色； 寬度：100px; 高度：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>​

Java腳本

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

在這里工作的示例 （適用於chrome，不能與其他瀏覽器一起查看）