简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

JavaScript动态创建div属性和样式示例代码_javascript技巧

WBOY
发布： 2016-05-16 17:20:40
原创
1272 人浏览过
1.创建div元素：

Javascript代码
复制代码 代码如下:


functioncreateElement(){
varcreateDiv=document.createElement("div");
createDiv.innerHTML="Testcreateadivelement!";
document.body.appendChild(createDiv);
}



functioncreateElement(){
varcreateDiv=document.createElement("div");
createDiv.innerHTML="Testcreateadivelement!";
document.body.appendChild(createDiv);
divFileitem.appendChild(divName);
}


2.创建div的属性：

Javascript代码
复制代码 代码如下:


functioncreateElement(){
varcreateDiv=document.createElement("div");
createDiv.title="thisisanewdiv.";
createDiv.id="newDivId";
createDiv.class="newDivClass";
createDiv.innerHTML="Testcreateadivelement!";
document.body.appendChild(createDiv);
}



functioncreateElement(){
varcreateDiv=document.createElement("div");
createDiv.title="thisisanewdiv.";
createDiv.id="newDivId";
createDiv.class="newDivClass";
createDiv.innerHTML="Testcreateadivelement!";
document.body.appendChild(createDiv);

createDiv.className = "name file_col";
}


3.创建div的样式：

Javascript代码
复制代码 代码如下:



functioncreateElement(){
varcreateDiv=document.createElement("div");
createDiv.style.background="pink";
createDiv.style.border="1pxsolidred";
createDiv.style.width="50px";
createDiv.style.height="50px";
createDiv.innerHTML="Testcreateadivelement!";
document.body.appendChild(createDiv);
}

相关标签：
动态创建
来源：php.cn
上一篇：让复选框只能选择一项的方法_javascript技巧 下一篇：javascript 函数声明与函数表达式的区别介绍_javascript技巧
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
动态修改Javafx中的内联CSS样式 我试图在应用程序最大化时更改窗格的背景图像。我的背景是使用内嵌css设置的。我为样式设置了两个不同的变量和一个if语句。但是，我没有运气让它改变样式。StringcssStyle=...
来自于 2024-04-06 20:57:16
0
1
487
使用网格创建此特定设计：分步指南 我正在尝试创建一个类似于此图像的布局，我尝试过使用此网格但无法实现。<ulclass="container"><liclass="f...
来自于 2024-04-06 20:29:08
0
2
492
使用opentbs生成odt文件时遇到的问题：相同key的值显示在同一行而不是单独的列中。 我正在使用一个名为OpenTbs的库来使用PHP创建odt，我使用它是因为动态生成列和行。我知道如何创建行和列，但我不知道如何组织它们。让我添加一个例子：所以首先我会将其添加到我的...
来自于 2024-04-06 20:18:18
0
1
483
仅 CSS 方法可在单击时动态修改图像 src，无需使用 JavaScript 我需要仅使用css更改鼠标单击时图像的src喜欢img:active{}
来自于 2024-04-06 19:25:49
0
1
505
无法从网站获取输入元素 所以我试图从Twitter获取一个输入元素，但当我运行它时，它不断在节点终端中给我一个这样的错误，结果，由此代码创建的浏览器窗口将自行关闭，因为它找不到正确的输入选择器。如何获取正...
来自于 2024-04-06 18:59:57
0
1
442
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！