使用javascript

Question

我正在创建一个应用程序，我需要使用javascript;

按如下方式设置div的样式

var div = document.createElement("div");
div.innerHTML = "xxxxxxxxxx";
div.style.display = "block";
div.style.width = "100%";
div.style.height = "10%";
div.style.background = "#f2dede";
div.style.color = "black";
div.style.position = "fixed";
div.style.padding = "20px";
div.style.top = "50%";
div.style.border = "5px solid #ebccd1";
//div.style.border-radius = "20px";
//div.style.text-align = "center";
//div.style.webkit-border-radius = "20px 0 0 20px";
//div.style.moz-border-radius = "20px 0 0 20px";
document.body.appendChild(div);

There's a fiddle here.

我面临的问题是上面的注释行都不会起作用。一旦我取消注释，div就不会显示。

这可能是什么原因？

Answer 1

您需要将代码更改为

div.style.borderRadius = "20px";
div.style.textAlign = "center";
div.style.webkitBorderRadius = "20px 0 0 20px";
div.style.mozBorderRadius = "20px 0 0 20px";

javascript中的属性名称与css中的名称不同。

Answer 2

您需要将这些属性的大小写更改为camelCase。 ＆＃39; - ＆＃39;是JS变量名中的无效字符。

div.style.borderRadius = "20px";
div.style.textAlign = "center";    

Answer 3

在javascript中，对象成员的名称中不能包含-。 你应该替换它：

//div.style.border-radius = "20px";
//div.style.text-align = "center";
//div.style.webkit-border-radius = "20px 0 0 20px";
//div.style.moz-border-radius = "20px 0 0 20px";

与

div.style.borderRadius = "20px";
div.style.textAlign = "center";
div.style.webkitBorderRadius = "20px 0 0 20px";
div.style.mozBorderRadius = "20px 0 0 20px";

Answer 4

JS中的CSS属性名称不同。

div.style.borderRadius = "20px";
div.style.textAlign = "center";
div.style.webkitBorderRadius = "20px 0 0 20px";
div.style.mozBorderRadius = "20px 0 0 20px";

Updated Fiddle

HTML Element Style

Answer 5

像这样使用这个CamelCase

div.style.borderRadius = "20px";
div.style.textAlign = "center";

Answer 6

工作Link。您的代码将是：

var div = document.createElement("div");
div.innerHTML = "xxxxxxxxxx";
div.style.display = "block";
div.style.width = "100%";
div.style.height = "10%";
div.style.background = "#f2dede";
div.style.color = "black";
div.style.position = "fixed";
div.style.padding = "20px";
div.style.top = "50%";
div.style.border = "5px solid #ebccd1";
div.style.borderRadius  = "20px";
div.style.textAlign = "center";
div.style.webkitBorderRadius = "20px 0 0 20px";
div.style.mozBorderRadius = "20px 0 0 20px";
document.body.appendChild(div);