Question

我在函数中创建了一个包含JavaScript的div元素。现在我如何调用div元素并在该特定函数之外给它一些样式。需要一些建议。

function output(str, level) {
    var obj = document.getElementById("dvList1");
    var div = document.createElement("div");
    var node = document.createTextNode(str);
    div.style.marginLeft = (level * 20) + "px";
    div.appendChild(node);
    obj.appendChild(div);
    div.style.display = "none";
}

Answer 1

从函数中返回div元素，如此

function output(str, level) {
    var obj = document.getElementById("dvList1");
    var div = document.createElement("div");
    var node = document.createTextNode(str);
    div.style.marginLeft = (level * 20) + "px";
    div.appendChild(node);
    obj.appendChild(div);
    div.style.display = "none";
    return div;
}

并将其称为

var div = output('test',11);
div.style.display = 'block';

或使div元素像

一样全局化

var div = null;
function output(str, level) {
    var obj = document.getElementById("dvList1");
    div = document.createElement("div");
    var node = document.createTextNode(str);
    div.style.marginLeft = (level * 20) + "px";
    div.appendChild(node);
    obj.appendChild(div);
    div.style.display = "none";
}

output('test',11);
div.style.display = 'block';

Answer 2

您可以将className添加到创建的div并在CSS中设置样式。

见最后一行功能：

function output(str, level, cssClass) 
{
  var obj = document.getElementById("dvList1");
  var div = document.createElement("div");
  var node = document.createTextNode(str);
  div.style.marginLeft = (level * 20) + "px";
  div.appendChild(node);
  obj.appendChild(div);
  div.style.display = "none";

  if(cssClass)
    div.className = cssClass;

  return div;
}

var div = output('test', 3, 'red-border');

或多类如：

var div = output('test', 3, 'red-border bold');

或在创建后添加：

var div = output('test', 3);
div.style.display = 'block';
div.className = 'red-border bold';

CSS：

.red-border { border: 1px solid red; }
.bold { font-weight: bold; }

Answer 3

您可以在函数内创建div元素，并在不同的函数中设置样式。但我建议在创建时为div分配一个类，然后使用css来设置div元素的样式。

造型Javascript制作元素

3 个答案: