设置动态创建元素的属性

Question

我们使用以下代码段在div插件中创建JavaScript元素。

代码段：

var temp = document.createElement('div');     

但我无法将风格应用于此div。你有没有看到这个，并提供以下的建议。这对我们非常有帮助。

• 如何为创建的div添加Class？
• 如何将样式应用于特定div？
• 如何为该div调用onscroll事件？

Answer 1

试试这个：

var temp = document.createElement('div');
temp.className = "yourclass";
temp.style.cssText = 'width:100px; height:100px'; //example
temp.onscroll = function() 
{ 
 alert('on scroll');
}; 

DEMO

Answer 2

[编辑] 这是一个工作小提琴：http://jsfiddle.net/NHBr2/

您现在已在temp变量中创建了'div'。为了设置这个样式，请使用此代码。

内联样式：

temp.setAttributes('style','width:100px;');

添加课程：

temp.setAttributes('class','myClass');

添加ID：

temp.setAttributes('id','MyID');

添加Evenet：

temp.setAttributes('OnMouseWheel','myFunction(e);');

Answer 3

试试这个

var ele = document.createElement('div')
var id = 'temp'
ele.setAttribute('id', id)

结果

<div id="temp"></div>

Answer 4

我建议你看一下JavaScript的基础知识，以了解它的功能。

如果您看一下JavaScript的小型初学者教程，您将了解您提出的大部分内容。它们非常非常基本，应该搜索，而不是在stackoverflow上询问。 Simply use google like this。不是很难，是吗？

但是，这仍然是你的问题的答案。我知道有几种方法可以做某些事情。以下代码段应适用于所有常见浏览器。

添加课程

要设置元素的类，可以使用setAttribute方法。

temp.setAttribute("class", "myclass");

应用样式

每个元素都有一个style属性，您可以使用该属性更改可以使用CSS更改的任何内容。

temp.style.backgroundColor = "#000000";
temp.style.color = "#FFFFFF";
temp.style.fontSize = "24pt";

倾听事件

您可以使用onsomething属性或attachEvent（Internet Explorer）和addEventListener（其他浏览器）向元素添加事件侦听器。

方法1 - onsomething属性：

使用元素的onscroll属性，您可以一次应用一个事件侦听器。这是最简单的方法，并得到所有浏览器的支持。

temp.onscroll = function(e) {
    // Do something
};

方法2 - attachEvent和addEventListener：

使用addEventListener，您可以根据需要应用多个事件侦听器。大多数时候，这是首选方式。较早版本的Internet Explorer不支持addEventlistener，因此在这种情况下您必须使用attachEvent。

// Check if the browser supports addEventListener
if (temp.addEventListener) {
    // If it does support addEventListener, use it
    temp.addEventListener("scroll", onScroll);
} else if (temp.attachEvent) {
    // If it does not support addEventListener, use attachEvent instead
    temp.attachEvent("onScroll", onScroll);
}

function onScroll(event) {
    // Do something
}

Answer 5

试试这个

var temp = document.createElement('div');   
temp.setAttribute('class', 'someClassName');
temp.setAttribute('Id', 'MyDiv');

你可以设置任何css属性来分配类，在这种情况下是'someClassName'，同样你可以调用任何定位为Id的函数，即“myDiv”

希望这会有所帮助